- A table with a fixed (sticky) header
- position: sticky
- HTML
- CSS
- How to Create a Table with a Fixed Header and Scrollable Body
- Example of creating a table with a scrollable body by using the position property:
- Result
- Example of creating a table with a scrollable body by using the display property:
- Table with fixed header css
- Freeze the top row for an html table only (Fixed Table Header Scrolling)
- 10 Answers 10
A table with a fixed (sticky) header
Often, we come across situations where we have a table with lots of data in it. So when we scroll, the table header are hidden off screen, and soon we don’t know what columns we’re looking at. This problem can easily be addressed by wrapping the table in a div , and a bit of friendly CSS.
position: sticky
Sticky positioning is kind of a hybrid, between relative and fixed . To quote https://developer.mozilla.org/en-US/docs/Web/CSS/position, «The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.» Basically, the element occurs in the normal document flow, until you scroll past a certain offset, at which point it sticks to the top of the specified container. We’re going to wrap our table in a div (which we’ll make scrollable by setting its height and overflow-y properties), and make the th s position in a sticky way. We’ll also collapse the internal borders of the table using the border-collapse property. Is it really that simple? It actually is. Here’s the code, in its full unadulterated glory (don’t worry, I didn’t include any spoiler from season 2 of The Umbrella Academy, but seriously, go watch it):
HTML
Sticky Header charset="UTF-8" /> rel="stylesheet" href="src/styles.css" /> class="wrapper"> Number Name Superpower Email 1 Luther Super-strength luther@umbrella.edu 2 Diego Telekinesis diego@umbrella.edu 3 Allison Rumor allison@umbrella.edu 4 Klaus Seance klaus@umbrella.edu 5 Five Time-travel five@umbrella.edu 6 Ben Inter-dimensional monster ben@umbrella.edu 7 Vanya Apocalyptic destruction vanya@umbrella.edu - Reginald [Spoiler] powers reginald@umbrella.edu - Pogo Human communication pogo@umbrella.edu - Cha-Cha Ruthlessness chacha@temps.comm - Hazel Compassion hazel@temps.comm CSS
body font-family: "Segoe UI", sans-serif; > table width: 100%; border-collapse: collapse; > th, td padding: 8px; > th text-align: left; background: #eee; position: sticky; top: 0px; > .wrapper border: 1px solid #ddd; width: 100%; height: 300px; overflow-y: auto; > How to Create a Table with a Fixed Header and Scrollable Body
In this tutorial, find some methods of creating an HTML table, which has a fixed header and scrollable body. Of course, you need to use CSS.
It is possible to achieve such a result by setting the position property to “sticky” and specifying 0 as a value of the top property for the element.
As usual, you can open the Try it Yourself demo link and play with the properties to understand them better.
You can also read the comments in front of each line to understand the properties better.
Example of creating a table with a scrollable body by using the position property:
html> html> head> title>Title of the document title> style> .tableFixHead < overflow-y: auto; /* make the table scrollable if height is more than 200 px */ height: 200px; /* gives an initial height of 200px to the table */ > .tableFixHead thead th < position: sticky; /* make the table heads sticky */ top: 0px; /* table head will be placed from the top of the table and sticks to it */ > table < border-collapse: collapse; /* make the table borders collapse to each other */ width: 100%; > th, td < padding: 8px 16px; border: 1px solid #ccc; > th < background: #eee; > style> head> body> div class="tableFixHead"> table> thead> tr> th>Col 1 th> th>Col 2 th> tr> thead> tbody> tr> td>1.1 td> td>2.1 td> tr> tr> td>1.2 td> td>2.2 td> tr> tr> td>1.3 td> td>2.3 td> tr> tr> td>1.4 td> td>2.4 td> tr> tr> td>1.5 td> td>2.5 td> tr> tr> td>1.6 td> td>2.5 td> tr> tr> td>1.7 td> td>2.5 td> tr> tr> td>1.8 td> td>2.5 td> tr> tbody> table> div> body> html>Result
Great! Huh? But let’s face it! I don’t like to see that scrollbar starting from the head section of the table!
So, let’s continue to the next example and fix that issue together!
Thers’s another method of creating a table with a fixed header and scrollable body. In the example below, we set the display to “block” for the element so that it’s possible to apply the height and overflow properties.
Example of creating a table with a scrollable body by using the display property:
html> html> head> title>Title of the document title> style> .fixed_header < width: 400px; table-layout: fixed; border-collapse: collapse; > .fixed_header tbody < display: block; width: 100%; overflow: auto; height: 100px; > .fixed_header thead tr < display: block; > .fixed_header thead < background: black; color: #fff; > .fixed_header th, .fixed_header td < padding: 5px; text-align: left; width: 200px; > style> head> body> table class="fixed_header"> thead> tr> th>Col 1 th> th>Col 2 th> th>Col 3 th> th>Col 4 th> th>Col 5 th> tr> thead> tbody> tr> td>1 td> td>2 td> td>3 td> td>4 td> td>5 td> tr> tr> td>6 td> td>7 td> td>8 td> td>9 td> td>10 td> tr> tr> td>11 td> td>12 td> td>13 td> td>14 td> td>15 td> tr> tr> td>16 td> td>17 td> td>18 td> td>19 td> td>20 td> tr> tr> td>21 td> td>22 td> td>23 td> td>24 td> td>25 td> tr> tbody> table> body> html>As mentioned before, we used overflow: auto on the tbody along with the display: block .
Here’s our result, and enjoy the difference!
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 |
As you have noticed, we didn’t use borders in the previous examples. However, if you need to add borders, you can simply use border property on all td tags.
.fixed_header td < border: 1px solid #797878; >| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 |
Table with fixed header css
- Difference between HTML and CSS
- What are physical tags in HTML?
- HTML | Deprecated Tags
- Container and Empty Tags in HTML
- HTML Comments
- How to set background image in HTML ?
- How to define a list item in HTML5?
- Difference between semantic and non-semantic elements
- How to Create Color Picker input box in HTML ?
- HTML Hex Color Codes
- HTML Block and Inline Elements
- HTML Drag and Drop
- How to set the name for the object in HTML5?
- How to add space between elements ?
- How to create a clickable button in HTML ?
- HTML Links
- How to link back out of a folder using the a-href tag?
- HTML ping Attribute
- HTML disabled attribute
- What is the use of “#” symbol in link URL ?
- How to create a link with a media attribute in HTML5 ?
- How to specify the source URL of the quote using HTML5 ?
- How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5 ?
- How to specify the hyperlink target for the area of an image in HTML5 ?
- How to make a HTML link that forces refresh ?
- How to set the language of text in the linked document in HTML5 ?
- How to specify what media/device the target URL is optimized for ?
- How to specify URL of resource to be used by the object in HTML5 ?
- How to use Anchor tag as submit button ?
- Elements of a form Tag
- How to set an alternate text for area in HTML5 ?
- How to specify one or more forms the object belongs to ?
- How to specify one or more forms the keygen element belongs to ?
- How to turn on/off form autocompletion in HTML ?
- How to specify that a group of related form elements should be disabled using HTML?
- How to specify how form-data should be encoded when submitting to server ?
- How to specify the URL that will process the data supplied through input(s) when the form is submitted?
- How to specify one or more forms the label belongs to ?
- How to specify multiple forms the select field belongs to in HTML ?
- How to change the type?
- How to specify which form element a label is bound to ?
- How to create a multiline input control text area in HTML5 ?
- How to create form validation by using only HTML ?
- HTML Emojis
- How to animate a straight line in linear motion using CSS ?
- How to specify the media type of the script in HTML5 ?
- How to display video controls in HTML5 ?
- How to mute video using HTML5 ?
- How to add controls to an audio in HTML5 ?
- Create Scanning Animation Loader using HTML & CSS
- How to specify media type of data specified in data attribute in HTML5 ?
- How to set the height and width of the video player in HTML5 ?
- How to check whether an image is loaded or not ?
- How to specify the type of the media resource in HTML5 ?
- How to Create Image Hovered Detail using HTML & CSS ?
- How to define media type of style tag in HTML5 ?
- How to set multiple media resources for elements in HTML5 ?
- How to set a single line break in HTML5 ?
- How to create a progress bar using HTML and CSS?
- How to create Perspective Text using HTML & CSS ?
- How to isolate a part of text that may be formatted in a different direction using HTML5 ?
- Design an Event Webpage using HTML & CSS
- How to Skew Text on Hover using HTML and CSS?
- Programming a slideshow with HTML and CSS
- How to specify that an option-group should be disabled in HTML5 ?
- How to disable the drop-down list in HTML5 ?
- How to define scalar measurement within a given range in HTML5 ?
- How to set the security algorithm of key in HTML5 ?
- How to set minimum and maximum value of range in HTML5 ?
Freeze the top row for an html table only (Fixed Table Header Scrolling)
I want to make an html table with the top row frozen (so when you scroll down vertically you can always see it). Is there a clever way to make this happen without javascript? Note that I do NOT need the left column frozen.
@mkoryak thanks a bunch. had so many issues with datatables’ fixedheader plugin, this solved in 5m! great work!
10 Answers 10
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.
The minimum code I needed to make it work is as follows:
With the table set to relative the can be set to sticky, with the top at 0
NOTE: It’s necessary to wrap the table with a div with max-height:
Best solution for me, the whole row is fixed in contrast to Chinthaka Fernando’s solution, where only the text is fixed
Perfect when table has both vertical and horizontal scroll, but remember safari: position: -webkit-sticky; /* Safari */ position: sticky; /* and other browsers */
Yep, this is a great answer! And if you want the bottom borders to be maintained see this: stackoverflow.com/questions/50361698/…
Simple, versatile and easily augmented to one’s needs. I have four tables on my page. Just put each in a separate div and all was fine. 2 scroll bars to deal with — one for the page and one for each table, but fine for my in-house needs.
This is called Fixed Header Scrolling. There are a number of documented approaches:
You won’t effectively pull this off without JavaScript . especially if you want cross browser support.
There are a number of gotchyas with any approach you take, especially concerning cross browser/version support.
Even if it’s not the header you want to fix, but the first row of data, the concept is still the same. I wasn’t 100% which you were referring to.
Additional thought I was tasked by my company to research a solution for this that could function in IE7+, Firefox, and Chrome.
After many moons of searching, trying, and frustration it really boiled down to a fundamental problem. For the most part, in order to gain the fixed header, you need to implement fixed height/width columns because most solutions involve using two separate tables, one for the header which will float and stay in place over the second table that contains the data.
//float this one right over second table Header 1 Header 2
//Data
An alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can’t limit its height (so stupid IMO).
Header 1 Header 2
This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT (AFAIK) guarantee that the distribution will be perfect in all cases. It becomes glaringly obvious if you have borders within your table.
I took a different approach and said screw tables since you can’t make this guarantee. I used divs to mimic tables. This also has issues of positioning the rows and columns (mainly because floating has issues, using in-line block won’t work for IE7, so it really left me with using absolute positioning to put them in their proper places).
There is someone out there that made the Slick Grid which has a very similar approach to mine and you can use and a good (albeit complex) example for achieving this.