8

I am using an HTML table and have applied vertical scroll to it and now I want to freeze the header row during scrolling. How can I do this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
laxmi
  • 865
  • 6
  • 17
  • 27
  • 1
    Question could be asked in a more general way. see [this post](http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only). – orad Dec 10 '12 at 19:44
  • Frozen table headers is one feature that HTML needs to add as a single attribute. This questions keeps getting asked everywhere and it sucks that the only way to do it is by creating some ugly hack or downloading a plugin that has more lines of code than what the rest of the project combined has. – DonO Aug 23 '16 at 14:52
  • Try this http://stackoverflow.com/a/25902860/5123803 you can resolve in four lines – Kleber Ferreira Mar 10 '17 at 17:33

5 Answers5

5

HTML:

<table>
 <tr id="header-row">
  <th>header col 1</th>
  <th>header col 2</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
 <tr>
 <tr>...</tr>
 ...
</table>

CSS:

#header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }
David Andersson
  • 1,246
  • 2
  • 11
  • 17
4

One easy way is to create 2 tables and fix the column widths. The first one act as Header

The lower second table is where the scroll bar is present and only the data.

gmhk
  • 15,598
  • 27
  • 89
  • 112
  • 2
    My table rows contents will be displayed dynamically so when i tried with two tables as u suggested for different data tbody rows with will differ and it looks mismatch between header table and body table – laxmi Jun 28 '11 at 05:53
  • 1
    @laxmi, try using the CSS for the both, that will be taken care – gmhk Jun 28 '11 at 06:23
  • Thought it was an elegant solution, but the headers are not aligned to the columns, or even close, alas! – JosephDoggie Feb 13 '15 at 20:25
1

for some future seek of a solution to creating a table with a locked column header:

Here's the css for the main PortfolioList div, then the header portion:

<style type="text/css">
    div.PortfolioList  
    {   /* bkgrnd color is set in Site.css, overflow makes it scrollable */
        height:500px; width:680px; position: static;  overflow-y:auto; float:left;                             
    }
    div.PortfolioList_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
        background-color:#7ac0da; height:45px; width:680px; position: static;  float:left;                             
    }    
</style>

Now here are the tables within the two divs mentioned above:

    <div class="PortfolioList_hdr">
       <table id="pftable_hdr">
        <caption>Portfolio Definitions</caption>
        <thead>
            <tr>
             <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="PortfolioList">
    <table id="pftable">
        <tbody>
        </tbody>
    </table>
</div>

I used jQuery to add the and and populate the contents accordingly.

I hope this helps...

  • Bob
bob.mazzo
  • 5,183
  • 23
  • 80
  • 149
1

Check out this jQuery plugin. It lets you freeze the column and fix the header, like you wanted.

http://gridviewscroll.aspcity.idv.tw/

mjkaufer
  • 4,047
  • 5
  • 27
  • 55
user3215480
  • 61
  • 3
-1

This seems working in FF.

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px; overflow-y:auto; display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>
kheya
  • 7,546
  • 20
  • 77
  • 109
  • 1
    When i tried giving style to tbody its not working.I am not getting scroll only . – laxmi Jun 28 '11 at 06:55
  • I updated my answer with sample code. Please try to test it and let me know. – kheya Jun 28 '11 at 07:10
  • This doesn't work well in IE. Projapati, if you want IE you'll probably need some javascript to it. – David Andersson Jun 29 '11 at 06:32
  • This solution has little to no merit even on firefox since it only supports one column, if your use case had only one column, then you are not dealing with tabular data, and would be much better off using `
    ` elements instead of a `` which would have given you the same thing only it would work on all browsers instead of just firefox. I am downvoting because the post is misleading, and might give someone hope that there is an easy way to support a fixed table header in firefox without using 2 tables.
     – codefactor Jun 27 '13 at 20:39