Lock top row for html table only (fixed scrolling of table header)

Question

I want to make an html table with a frozen top row (so when you scroll down vertically you can always see it).

Is there a smart way to do this without javascript?

Please note that I do NOT need a frozen left column.

Answer 1

This is called a fixed scrolling header. There are a number of documented approaches:

http://www.imaputz.com/cssStuff/bigFourVersion.html

You won’t be able to handle this effectively without JavaScript ... especially if you want cross-browser support.

There are a number of issues with any approach you use, especially regarding cross-browser / version support.

Edit:

Even if this is not the header you want to fix, but the first row of data, the concept remains the same. I was not 100% what you had in mind.

Another thought that my company was tasked with finding a solution for this that could work in IE7 +, Firefox, and Chrome.

After many moons of searching, trying and disappointment, it really came down to a fundamental problem. For the most part, to get a fixed header, you need to implement fixed height / width columns, because most solutions use two separate tables, one for the header, which will float and stay in place above the second table containing the data.,

//float this one right over second table <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </table> <table> //Data </table> 

Alternatively, you can use some tbody and thead tags, but this is also a drawback, because IE will not allow you to put the scroll bar on tbody, which means you cannot limit its height (silly IMO).

 <table> <thead style="do some stuff to fix its position"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody style="No scrolling allowed here!"> Data here </tbody> </table> 

This approach has many problems, such as ensuring EXACT pixel width, because the tables are so cute that different browsers will distribute pixels differently based on calculations, and you just CANNOT guarantee (AFAIK) that the distribution will be perfect in all cases. This becomes obviously obvious if you have borders inside the table.

I took a different approach and said that the screw tables, since you can not give this guarantee. I used a div to simulate tables. This also has problems with the positioning of rows and columns (mainly due to floating point problems, using the inline block will not work in IE7, so I really had to use absolute positioning to put them in their place).

There is someone who created the Slick Grid, which is very similar to mine, and you can use a good (albeit complex) example to achieve this.

https://github.com/6pac/SlickGrid/wiki

Answer 2

According to a clean CSS with a fixed header CSS scrolling table , I wrote DEMO to easily fix the header by setting overflow:auto to tbody.

 table thead tr{ display:block; } table th,table td{ width:100px;//fixed width } table tbody{ display:block; height:200px; overflow:auto;//set tbody to auto } 

Answer 3

My concern was not to have a camera with a fixed width. Which did not seem to work anyway. I found this solution, which seems to be what I need. I am posting it here for those who are looking for ways. Check out this fiddle

Working fragment:

 html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top:100px; left:100px; width:800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 160px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #eee; } td, th { border-bottom:1px solid #eee; background: #ddd; 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; } th:first-child div{ border: none; } 

 <section class=""> <div class="container"> <table> <thead> <tr class="header"> <th> Table attribute name <div>Table attribute name</div> </th> <th> Value <div>Value</div> </th> <th> Description <div>Description</div> </th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left, center, right</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> </tr> <tr> <td>bgcolor</td> <td>rgb(x,x,x), #xxxxxx, colorname</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> </tr> <tr> <td>border</td> <td>1,""</td> <td>Specifies whether the table cells should have borders or not</td> </tr> <tr> <td>cellpadding</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> </tr> <tr> <td>cellspacing</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between cells</td> </tr> <tr> <td>frame</td> <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> </tr> <tr> <td>rules</td> <td>none, groups, rows, cols, all</td> <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> </tr> <tr> <td>summary</td> <td>text</td> <td>Not supported in HTML5. Specifies a summary of the content of a table</td> </tr> <tr> <td>width</td> <td>pixels, %</td> <td>Not supported in HTML5. Specifies the width of a table</td> </tr> </tbody> </table> </div> </section> 

Answer 4

Starting in 2019, the best answer I found was @ shahriyar-ahmed using position:sticky CSS position:sticky :

stack overflow

He used this CSS:

 /*This will work on every browser but Chrome Browser*/ .table-fixed thead { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; background-color: #000; color: #fff; } /*This will work on every browser*/ .table-fixed thead th { position: sticky; position: -webkit-sticky; top: 0; z-index: 999; background-color: #000; color: #fff; } 

 <table class="table-fixed"> <thead> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> </table> 

Answer 5

You can use position:fixed in <th> ( <th> , which is the top line).

Here is an example

Answer 6

you can use two divs, one for the headers and the other for the table. then use

 #headings { position: fixed; top: 0px; width: 960px; } 

as @ptriek said this would only work for fixed-width columns.

Answer 7

The jQuery Chromatable plugin allows a fixed header (or top row) with a width that allows percentages, only a percentage of 100%.

http://www.chromaloop.com/posts/chromatable-jquery-plugin

I can not imagine how you could do this without javascript.

update: new link → http://www.jquery-plugins.info/chromatable-00012248.htm

Answer 8

I use this:

 tbody{ overflow-y: auto; height: 350px; width: 102%; } thead,tbody{ display: block; } 

I determine the width of columns using bootstrap css col-md-xx. Without determining the width of the columns, the auto-width does not match. 102% percent is that you lose overfilled sax

Answer 9

Using css zebra style

Copy this example into this example and make sure the title is fixed.

  <style> .zebra tr:nth-child(odd){ background:white; color:black; } .zebra tr:nth-child(even){ background: grey; color:black; } .zebra tr:nth-child(1) { background:black; color:yellow; position: fixed; margin:-30px 0px 0px 0px; } </style> <DIV id= "stripped_div" class= "zebra" style = " border:solid 1px red; height:15px; width:200px; overflow-x:none; overflow-y:scroll; padding:30px 0px 0px 0px;" > <table> <tr > <td>Name:</td> <td>Age:</td> </tr> <tr > <td>Peter</td> <td>10</td> </tr> </table> </DIV> 

Pay attention to the top filling of 30px in the leaves of the div space, which is used by the 1st row of divided data i.e. tr: nth-child (1), which is a "fixed position", and formatted to within -30px

Answer 10

You can use position: sticky; for the first row of the MDN ref table :

 .table-class tr:first-child>td{ position: sticky; top: 0; }