Freeze the top row for an html table only (Fixed Table Header Scrolling)

I know this has several answers, but none of these really helped me. I found this article which explains why my sticky wasn't operating as expected.

Basically, you cannot use position: sticky; on <thead> or <tr> elements. However, they can be used on <th>.

The minimum code I needed to make it work is as follows:

table { text-align: left; position: relative; } th { background: white; position: sticky; top: 0; } 

With the table set to relative the <th> can be set to sticky, with the top at 0

NOTE: It's necessary to wrap the table with a div with max-height:

<div id="managerTable" > ... </div> 

where:

#managerTable { max-height: 500px; overflow: auto; } 

According to Pure CSS Scrollable Table with Fixed Header , I wrote a DEMO to easily fix the header by setting overflow:auto to the 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 } 

My concern was not to have the cells with fixed width. Which seemed to be not working in any case. I found this solution which seems to be what I need. I am posting it here for others who are searching of a way. Check out this fiddle

Working Snippet:

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>

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

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

It is possible using position:fixed on <th> (<th> being the top row).

Here's an example

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

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

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

The Chromatable jquery plugin allows a fixed header (or top row) with widths that allow percentages--granted, only a percentage of 100%.

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

I can't think of how you could do this without javascript.

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

I use this:

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

I define the columns width with bootstrap css col-md-xx. Without defining the columns width the auto-width of the doesn't match the . The 102% percent is because you lose some sapce with the overflow

Using css zebra styling

Copy paste this example and see the header 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> 

Notice the top padding of of 30px in the div leaves space that is utilized by the 1st row of stripped data ie tr:nth-child(1) that is "fixed position" and formatted to a margin of -30px

I know that vanilla styling was asked for, but due to the prevalence of TailwindCSS, I thought it also useful for a version that uses Tailwind styling as well:

<div class="overflow-y-auto max-h-[500px]"> <!-- Adjust max-height as needed --> <table class="min-w-full divide-y divide-gray-300"> <thead class="bg-white sticky top-0 z-10"> <!-- Add these classes --> <tr> <!-- Your existing th elements --> </tr> </thead> <tbody class="divide-y divide-gray-200 bg-white"> <!-- Your existing tbody content --> </tbody> </table> </div> 

Whenever there are many solutions to a problem, the shortest solution with minimum code is the best one. My table is generated using pd.DataFrame.to_html(), all I need to do is to append the following into CSS-style:

thead > tr > th { position: sticky; top: 0; } 

It works out perfectly. If you just put th {, you will end up with all rows of the index column overlapped together at the top when you scroll to the bottom. And you won't be able to see the name of the index column. If you also need to freeze the left-most column when scrolling horizontally, you can append the following in addition:

tbody > tr > th { position: sticky; left: 0; } 

Making the TRs flex boxes and the TBODY a block with a max height and overflow scrolling seems to do the trick for me:

table.sticky-headers tbody { overflow: scroll; max-height: 80vh; display: block; } table.sticky-headers tr { display: flex; }