Guruji Point - Code You Want To Write

  • Home
  • Asp.Net
  • WCF
  • SQL
  • Type Script
  • AngularJS
  • Tech News
  • Blog
  • Earn Online

Wednesday, 12 April 2017

Fixed Header Scrollable Html Table Using CSS

 .net, asp, C#, css, css use, Dynamic Grid Row, fixed header, grid example, gridview, html, progress bar, progress image, scrollable table html, static     No comments   


Introduction
In this post we will learn how to create scrollable Html table with fixed header with the help of css. Css has many properties through which we can achieve this task easily.

Have a Look
In previous articles we already done similar work with grid. Display data in Asp GridView in tabular form. Change grid view row color based on condition dynamically. Display progress image on Button click. 

Practice
If you are working with asp.net application then add a simple Html form or you can do this same task with your aspx page. Here is my code for Html page with CSS.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Scrollable HTML table with CSS Style</title>
    <style type="text/css">
        table {
            border-spacing: 0;
            width: 100%;
        }
        td + td {
            border-left: 1px solid #000;
        }
        td, th {
            border-bottom: 1px solid #000;
            background: #fff;
            color: #000;
            padding: 10px 25px;
        }
        th {
            height: 0;
            line-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            color: transparent;
            border: none;
            white-space: nowrap;
        }
            th div {
                position: absolute;
                background: transparent;
                color: #fff;
                padding: 9px 25px;
                top: 0;
                margin-left: -25px;
                line-height: normal;
                border-left: 1px solid #800;
            }
       section {
            position: relative;
            border: 1px solid #000;
            padding-top: 37px;
            background: #000099;
            width: 40%;
        }
        .Maincontainer {
            overflow-y: auto;
            height: 200px;
        }
    </style>
</head>
<body>
    <form id="form1">
        <section class="">
            <div class="Maincontainer">
                <table>
                    <thead>
                        <tr class="header">
                            <th>Visitors Name<div>Visitors Name</div></th>
                            <th>Location<div>Location</div></th>
                            <th>Email<div>Email</div></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Mark Zuck</td>
                            <td>USA</td>
                            <td>mark@fb.com</td>
                        </tr>
                        <tr>
                            <td>Jack Dorsey</td>
                            <td>USA</td>
                            <td>jack@tw.com</td>
                        </tr>
                        <tr>
                            <td>Williamson</td>
                            <td>UK</td>
                            <td>will@gmail.com</td>
                        </tr>
                        <tr>
                            <td>Narendra Modi</td>
                            <td>India</td>
                            <td>modiji@hotmail.com</td>
                        </tr>
                        <tr>
                            <td>SRK King</td>
                            <td>India</td>
                            <td>srk@gmail.com</td>
                        </tr>
                        <tr>
                            <td>Reyna Seen</td>
                            <td>Virginia</td>
                            <td>ryna@gmail.com</td>
                        </tr>
                        <tr>
                            <td>Seen Paul</td>
                            <td>USA</td>
                            <td>seen@gmail.com</td>
                        </tr>
                        <tr>
                            <td>Dom</td>
                            <td>USA</td>
                            <td>dom@dom.com</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </form>
</body>
</html>


Hope you familiar with CSS and this post will be really helpful for you.  Here is the output



  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Facebook Updates

Guruji Point

Categories

Comman table Expression in SQL Dynamic Grid Row IQueryable in c# Learn AngularJS Scope_Identity() Use of indexes comma seperated string in sql row_number() and dense_rank() salary table structure. while loop in sql why do we need cursor why tuple used

About Us

This blog is about the Programming ,Tech News and some intresting facts related Contents. Here you can find fundamental and expert level topic of programming languages very practically related to C# , Asp.Net ,Sql-Server, JavaScript, Jquery, WebServices And also Web-Api, WCF ,WPF, Angular Js.

Contact Us

Email Us - gurujipoints@gmail.com
Contact- 8077657477

Reach Us

Copyright © Guruji Point - Code You Want To Write