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 TwitterShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Facebook Updates

Guruji Point

Popular Posts

  • Base64 Encoding And Decoding In SQL Server
    Introduction In this article we will learn How to encode a string into Base64String and how to decode Base64String to string. How to crea...
  • Convert DataSet To List Or GenericList Using LINQ - C#
    Introduction In this article we will learn how to convert dataset to list or convert DataSet to List of collection o generic list in c#. ...
  • Trigger In SQL Server - Insert Update Delete In Single Trigger With Example
    Introduction In this article we will learn what is trigger . How to manage Insert, Update and Delete operation in trigger. Insert Update ...
  • Maintain The State Of Dynamic Added User Control On Each PostBack
    Introduction In this article we will learn how to maintain the state of dynamically created controls in asp.net using c#.  Retain the stat...
  • What Is Connection Pooling In Asp.Net Using C# With Example
    Introduction In this article we will learn what is connection pooling. Why connection pooling useful , what is the max limit and minimum ...

Categories

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

Best Deal Here

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