Fixed table header with scrolling page body

Question

Initially scrolling, and then a fixed table header with scrolling of the page body.

I would like to place a table somewhere in the middle of my web page that has the following behavior:

• For the most part, it acts like a “normal” html table ... until you scroll through the table headers.
• When you scroll through the table headers, the table headers remain fixed at or near the top of this page, and the rest of the table continues to scroll with the rest of the page body. This is not the same as scrolling a <tbody> with a fixed <thead> .
• Bonus points if the table headings disappear if you scroll the previous row of the table.
• Bonus points if the table rows disappear when they scroll above the headings. (I need this function only if / if I try to place the header of the fixed table in a different place than at the very top of the page).

It should look something like the example in this fiddle:
http://jsfiddle.net/yeAhU/260/
In addition, the contents of the header will scroll to the top of the page before becoming fixed, and the contents of the table should not appear above the headers when scrolling.

I tried to slightly tweak most of the published answers to the questions about the “fixed table heading header”, but I cannot get the type of behavior I am looking for from these examples.

I would like the solution to be CSS based, but I am open to other solutions like JS.

I would like the solution to be compatible with Chrome and Firefox.

---

Question

Can this be done, and is it only possible to do this in CSS? How?

Answer 1

In CSS, you can use position:sticky; but since Firefox doesn’t mix these two so well, you still need to use thead and tbody to break the layout table into sticky .... reset the layout table on the body and set the layout table to fix to hold the columns visually with thead / tbody ... example:

http://jsfiddle.net/yeAhU/261/ I believe that it corresponds to the points: 1,2,3 (what really?)

http://caniuse.com/#search=sticky

chrome deleted it a while ago the following link may be useful

https://www.sitepoint.com/css-position-sticky-introduction-polyfills/

 tbody, thead tr { display: table; width: 100%; table-layout: fixed; } td { border:1px solid; } * {box-sizing:border-box; border-collapse:collapse;} 

 Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br> <table width="400" border="0" style="display:block;"> <thead style="display:block;position: sticky;top:20px;background-color: grey;"> <tr> <td width="200"> Name </td> <td width="200"> Age </td> </tr> </thead> <tbody> <tr> <td width="200"> &nbsp; </td> <td width="200"> &nbsp; </td> </tr> <tr> <td> John </td> <td> 28 </td> </tr> <tr> <td> Jacob </td> <td> 22 </td> </tr> <tr> <td> Nicole </td> <td> 12 </td> </tr> <tr> <td> Marie </td> <td> 15 </td> </tr> <tr> <td> Fabian </td> <td> 18 </td> </tr> <tr> <td> Caspar </td> <td> 23 </td> </tr> <tr> <td> Elder </td> <td> 12 </td> </tr> <tr> <td> Frank </td> <td> 17 </td> </tr> <tr> <td> Ling </td> <td> 45 </td> </tr> <tr> <td> Pong </td> <td> 68 </td> </tr> <tr> <td> Jason </td> <td> 67 </td> </tr> <tr> <td> Tony </td> <td> 23 </td> </tr> <tr> <td> Britney </td> <td> 21 </td> </tr> <tr> <td> Cusac </td> <td> 91 </td> </tr> <tr> <td> John </td> <td> 28 </td> </tr> <tr> <td> Jacob </td> <td> 22 </td> </tr> <tr> <td> Nicole </td> <td> 12 </td> </tr> <tr> <td> Marie </td> <td> 15 </td> </tr> <tr> <td> Fabian </td> <td> 18 </td> </tr> <tr> <td> Caspar </td> <td> 23 </td> </tr> <tr> <td> Elder </td> <td> 12 </td> </tr> <tr> <td> Frank </td> <td> 17 </td> </tr> <tr> <td> Ling </td> <td> 45 </td> </tr> <tr> <td> Pong </td> <td> 68 </td> </tr> <tr> <td> Jason </td> <td> 67 </td> </tr> <tr> <td> Tony </td> <td> 23 </td> </tr> <tr> <td> Britney </td> <td> 21 </td> </tr> <tr> <td> Cusac </td> <td> 91 </td> </tr> <tr> <td> John </td> <td> 28 </td> </tr> <tr> <td> Jacob </td> <td> 22 </td> </tr> <tr> <td> Nicole </td> <td> 12 </td> </tr> <tr> <td> Marie </td> <td> 15 </td> </tr> <tr> <td> Fabian </td> <td> 18 </td> </tr> <tr> <td> Caspar </td> <td> 23 </td> </tr> <tr> <td> Elder </td> <td> 12 </td> </tr> <tr> <td> Frank </td> <td> 17 </td> </tr> <tr> <td> Ling </td> <td> 45 </td> </tr> <tr> <td> Pong </td> <td> 68 </td> </tr> <tr> <td> Jason </td> <td> 67 </td> </tr> <tr> <td> Tony </td> <td> 23 </td> </tr> <tr> <td> Britney </td> <td> 21 </td> </tr> <tr> <td> Cusac </td> <td> 91 </td> </tr> <tr> <td> John </td> <td> 28 </td> </tr> <tr> <td> Jacob </td> <td> 22 </td> </tr> <tr> <td> Nicole </td> <td> 12 </td> </tr> <tr> <td> Marie </td> <td> 15 </td> </tr> <tr> <td> Fabian </td> <td> 18 </td> </tr> <tr> <td> Caspar </td> <td> 23 </td> </tr> <tr> <td> Elder </td> <td> 12 </td> </tr> <tr> <td> Frank </td> <td> 17 </td> </tr> <tr> <td> Ling </td> <td> 45 </td> </tr> <tr> <td> Pong </td> <td> 68 </td> </tr> <tr> <td> Jason </td> <td> 67 </td> </tr> <tr> <td> Tony </td> <td> 23 </td> </tr> <tr> <td> Britney </td> <td> 21 </td> </tr> <tr> <td> Cusac </td> <td> 91 </td> </tr></tbody> </table> Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br>Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br>Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br>Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br>Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br>Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br>Additional stuff <br> Additional stuff <br> Additional stuff <br> Additional stuff <br> 

Answer 2

Here is your solution .. violin Jonas Schubert Erlandsson

 <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> 

and css

 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: 200px; } 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; }