A table with both a sticky header and a sticky first column
High five to Cameron Clark who emailed me demoed this and showed me how cool it is. And indeed, Cameron, it is cool. When I shared that around, Estelle Weyl showed me a demo she made several years ago. That feels about right, Estelle is always a couple of years ahead of me.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
These are cool solutions 🙂 Here is my take on this: http://hgsweb.de/sticky/index.html Sources are located at: https://github.com/napengam/sticky
I had a similar need some time ago, when I needed to build a product comparison table, and I realized that having the first column always visible can be problematic on small screens, where there isn’t enough space. Instead, I preferred adding the label as custom attribute and fetch it with CSS attr(). I did use horizontal stickiness too, though, for the intermediate sections. Here’s the respective pen and a more detailed explanation.
All browsers will support th/thead sticky by the end of the year. “you can’t position tr or thead” is not true in Firefox/Safari, and is a crbug.com/702927 in Chrome. Chrome’s table rewrite is almost done, and with it, sticky bug will be fixed.
Have you tried this out using any assistive tech (VoiceOver, JAWS, etc)? Historically, they don’t have a great time whenever you get CSS to do anything “elaborate” on a table and get confused. It looks a great attempt otherwise however.
Wayne, this works in JAWS, VO, and NVDA because the wrapper has an accessible name & appropriate role, and the table has no display properties overriding its semantics. TalkBack on Android is not so good. I filed a bug in December because this technique can cause trouble: TalkBack does not recognize tables in parents with tabindex. I have screen reader support notes in my post Under-Engineered Responsive Tables, explaining the attributes. For positioning in Safari you may need to use -webkit-sticky and the may misbehave as well (be sure to test). I go into more detail and outline workarounds in Fixed Table Headers.
You could set also 2nd column sticky, just need to know its position from the left. In other words, you need to know the size of the 1st column. I used custom CSS properties for “fixed” columns sizes. Then used JS to make “fixed” columns resizable by user. Works like a charm! 🙂
Table with a fixed first column
On many web projects, we need to display tabular data. We don’t need a fancy library to deal with tables most of the time. When the amount of data is small, features such as virtualization are over-skilled. Regular HTML tables can do the job. But it does not mean that we cannot add handy features such as a fixed first column. Let’s start with a basic HTML table.
DATA1 DATA2 DATA3 DATA4 Some values Some values Some values Some values Other values Other values Other values Other values Other values Other values Other values Other values Other values Other values Other values Other values 
With some styling, we end up with the following UI.
When horizontal scrolling is required, we want a fixed first column. Let’s see how to implement this feature in CSS. First, we need to use overflow-x:auto to make the scrollbar appears when necessary.
Sadly, setting this property directly to the table element seems to have no effect.
According to the CSS specifications, overflow properties only apply to block, flex, and grid containers. We could change the display property of the table. But, semantically, it’s a table, not a block. Therefore, I prefer to use a wrapper element.
class="container"> DATA1 DATA2 DATA3 DATA4 Some values Some values Some values Some values .container overflow-x: auto; > When we scroll horizontally, the first column should «stick» the left edge of the table. This is where sticky positioning comes to into play.
The idea about sticky positioning is that as you scroll, an element can «stick» to the edge.
Here’s what the CSS code would be like:
tr>th:first-child,tr>td:first-child position: sticky; left: 0; > 
The tr>th:first-child,tr>td:first-child selector only applies sticky positioning to the first column cells.
This solution seems pretty good. But, not so fast! With that, you’ll get the following side effect:
The first column is sticky (and it works), but we can still see the content of other columns (under our first column) while we scroll.
To understand this issue, let’s have a look at our background definition:
tr:nth-child(odd) background: $white; > tr:nth-child(even) background: $gray-200; > The background property is defined at the row level. It means that the cell has no background. However, we want the first column cells to have a background. So it hides other cells when we scroll.
We end up with this CSS:
tr:nth-child(odd) td background: $white; > tr:nth-child(even) td background: $gray-200; > .container overflow-x: auto; > tr>th:first-child,tr>td:first-child position: sticky; left: 0; > tr:nth-child(odd) td background: $white; > tr:nth-child(even) td background: $gray-200; > 
And really that’s it.
You can find the source code here.
A table with both a sticky header and a sticky first column
High five to Cameron Clark who emailed me demoed this and showed me how cool it is. And indeed, Cameron, it is cool. When I shared that around, Estelle Weyl showed me a demo she made several years ago. That feels about right, Estelle is always a couple of years ahead of me.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
These are cool solutions 🙂 Here is my take on this: http://hgsweb.de/sticky/index.html Sources are located at: https://github.com/napengam/sticky
I had a similar need some time ago, when I needed to build a product comparison table, and I realized that having the first column always visible can be problematic on small screens, where there isn’t enough space. Instead, I preferred adding the label as custom attribute and fetch it with CSS attr(). I did use horizontal stickiness too, though, for the intermediate sections. Here’s the respective pen and a more detailed explanation.
All browsers will support th/thead sticky by the end of the year. “you can’t position tr or thead” is not true in Firefox/Safari, and is a crbug.com/702927 in Chrome. Chrome’s table rewrite is almost done, and with it, sticky bug will be fixed.
Have you tried this out using any assistive tech (VoiceOver, JAWS, etc)? Historically, they don’t have a great time whenever you get CSS to do anything “elaborate” on a table and get confused. It looks a great attempt otherwise however.
Wayne, this works in JAWS, VO, and NVDA because the wrapper has an accessible name & appropriate role, and the table has no display properties overriding its semantics. TalkBack on Android is not so good. I filed a bug in December because this technique can cause trouble: TalkBack does not recognize tables in parents with tabindex. I have screen reader support notes in my post Under-Engineered Responsive Tables, explaining the attributes. For positioning in Safari you may need to use -webkit-sticky and the may misbehave as well (be sure to test). I go into more detail and outline workarounds in Fixed Table Headers.
You could set also 2nd column sticky, just need to know its position from the left. In other words, you need to know the size of the 1st column. I used custom CSS properties for “fixed” columns sizes. Then used JS to make “fixed” columns resizable by user. Works like a charm! 🙂
Scrollable Table with Fixed First Column CSS Only
Sometimes, we need to display multiple columns in a table to represent a large amount of data. Obviously, the table will be large and may overflow over the other content of the page. Anyhow, using the CSS overflow property we can overcome this situation by making it scrollable. But while scrolling we may lose focus on the data in regards to considering where this row relates to. In this case, we need a fixed first column while the other columns of the table remain scrollable.
So, in this tutorial, we are going to create an HTML table with a fixed first column. As you have seen in the above preview, there is a table showing some data that is related to both row headings and the first column. The first column is fixed whereas the other columns are horizontal scrollable. You can explore it on the demo page to see it in action.
The coding concept is that we’ll create two table elements and wrap them into a wrapper (div element). We’ll arrange these tables side by side, define the fixed layout for the first table but make the second table scrollable. Similarly, we’ll define some styles for the table and make it responsive. So, let’s get started with HTML to create a table with the first fixed column.
The HTML Structure
In HTML, create a div element with a class name «wrapper» and place two table elements inside it. The first one is the fixed table and the other is horizontally scrollable. In the first table, you can place one or two columns according to your needs. Inside the second table, you can place any data that matched with the first table’s column.
In the above HTML code, the first table contains a class name «table-scores» and the second table contains the class name «table-data» . Basically, we’ll use these classes to style the tables. So, you are required to add these classes to your tables and wrap these tables inside a wrapper element.
CSS Style for Scrollable Table with Fixed First Column
In CSS, select the «wrapper» element and define a solid border that covers both tables inside it. Likewise, select the table element define a background color, and collapse its border using CSS border-collapse property.
The «table-scores» class makes the first column of the table fixed. Use the table-layout property and define its fixed position. In order to display both tables side by side, we need to set its display property as inline-block along with a fixed width. So, define 175px width (or according to the content of your first column) and display it as inline-block. You can set a custom background as you required.
.table-scores < table-layout: fixed; width: 175px; display: inline-block; background: #f9fafc; border-right: 1px solid #e6eaf0; vertical-align: top; >.table-scores td, .table-scores th < max-width: 179px; >.table-scores th
The «table-data-wrapper» is the class name for the second table. You also need to display it as an inline-block. The data table may contain multiple columns. So, there should be enough space to display all the columns. For this purpose, define the 100% width and minus the first table width using the CSS calc function. To forbade the overlapping of the table width over the other content we will make it horizontally scrollable. Therefore, define the overflow-x property and set its value «scroll» . Thus, it will make the table scrollable whereas the first column (of the first table) will remain fixed.
.table-data-wrapper < display: inline-block; overflow-x: scroll; vertical-align: top; width: calc(100% - 175px); >.table-data-wrapper table < border-left: 0; >.table-data-wrapper td, .table-data-wrapper th < width: calc((100vw - 2 * 40px - 180px) / 5); >
Now, specify the basic styles for the th , td , tr and thead element. Basically, these styles are optional but you can define custom values for these elements as per your requirements.
.table-data-wrapper td:not(:last-child), .table-data-wrapper th:not(:last-child) < border-right: 1px solid #e6eaf0; >th < height: 72px; >th, td < padding: 0 16px; >thead < background: #f9fafc; >td < height: 48px; >thead tr, tbody tr:not(:last-child)
Finally, define CSS media rules and define the min and max width of the table headings in order to make the table responsive. The width values are already calculated according to screen sizes, you just need to add the following snippet into your project.
@media (min-width: 900px) < .table-data-wrapper td, .table-data-wrapper th < min-width: calc((100vw - 2 * 40px - 180px) / 5); max-width: calc((100vw - 2 * 40px - 180px) / 5); >> @media (max-width: 1023px) < .table-data-wrapper td, .table-data-wrapper th < min-width: calc((100vw - 2 * 40px - 180px) / 3); max-width: calc((100vw - 2 * 40px - 180px) / 3); >>
That’s all! I hope, you have successfully integrated this table into your project. If you have any questions or suggestions, let me know by comment below.