Sticky columns

HTML & CSS
1

I have a table with 10 columns. I want the header row, first 3 columns and last column sticky.
I got the header row and last column sticky but can’t get the first 3 to stick. here is the CSS

thead tr > th {
    background:#ccc;
    position: sticky;
    padding:.5rem;
    z-index: 3;
    top: 0;
  }
thead tr > th:nth-child(-n+1),
  tbody tr > td:nth-child(-n+1)
   {
    position: sticky;
    right: 0;
    background:#ddd;
  }

  thead tr > th:nth-child(-n+2),
  tbody tr > td:nth-child(-n+2)
   {
    position: sticky;
    right: 150px;
    background:#ddd;
  }

  thead tr > th:nth-child(-n+3),
  tbody tr > td:nth-child(-n+3)
   {
    position: sticky;
    right: 300px;
    background:#ddd;
  }

Appreciate any help with the this

2

Someone asked for something similar about 4 years ago and I came up with this::

https://codepen.io/paulobrien/pen/oNGwvKv

I’m on a mobile at the moment so can’t really check if that’s the right demo but I’ll be back tomorrow to check :slight_smile:

3

That was me, and it is. I searched codepen earlier but couldn’t find it, thought maybe it had been deleted, that’s why I asked. I don’t see/understand the need for the JavaScript, surely the non-sticky column width’s would be set to fit-contents. That was my intention at least.
Thanks again.

4

If I remember correctly the problem with the sticky left and right columns apart from the first ones that are left:0 or right:0 is that you have to know the width of the column.

If the columns are fixed width at say 200px wide you can then say left:200px and left:400px to make them sticky. If on the other hand the columns are fluid then you have no measurement on which to apply the left position.

My example will work without js but the table columns will be fixed width.

I’ll have another look later today and see if there are any other ways that i missed. :slight_smile:

1 Like
5

I doubt you missed anything. Visually it looks great and works perfectly. Only change would be to add CSS fixed width and fit-content to the th’s and td’s, and disregard the JavaScript, no need for it.

6

Would this work for you?
Sticky Columns

7

Yes you could just remove the js as I said which is only there to make the table more fluid. Here’s a version with the js removed and a few tweaks for comfort.

The scrolling columns will fit the content if it forces the width otherwise text just wraps evenly. The sticky columns do need a fixed width though as mentioned so you can offset the sticky

That’s basically the same as my example except you got the z-index wrong on the header and it overlaps the other headers. :wink:

8

Just for fun here’s a js version that automatically works out the widths of the first three columns to set the offsets.

1 Like
9

Using the version emmVXXQ on my laptop, col2 scrolls over col1, then col3 scrolls over col2. So only col1 is actually sticky. With version bNNLZNp, col2 and col3 scroll over and past col1, again only col1 is sticky. In codepen, col2 and col3 both move and partly overlap col1 and col2. What causes this to happen?

10

I don’t see that happening here?

What browser and what size viewport is that?

I’m not seeing that either here in this demo.

Ah ok.:slight_smile: Without the js working out the width we need to include the padding and borders in the manual left offset. I’ve added a variable and added it to this demo.

You’ll have to let me know what browsers you see a problem with but I have only checked chrome at the moment but will look at others shortly.:slight_smile:

11

Firefox and Safari also seem to be working ok for me on my macbook air laptop.

I have tweaked some things so please look at the latest versions of those.:wink:

12

The vertical borders between cols 1, 2 and 3 are solid, half of the horizontal borders are not. When scrolling horizontal, I can see the horizontal borders on the non-sticky columns as they scroll behind the sticky cols. Is this to do with borders or padding? That is the only issue. Otherwise, :+1:

13

Is that happening in my demos. I can’t see it or I’m looking at the wrong thing :slight_smile:

You shouldn’t be able to see anything under the coloured background of the sticky columns unless you have the sticky left position out by a px or 2 which might happen if you reduced the borders or padding but didn’t change the offset etc. The non sticky columns slide behind the sticky columns so as long as all things add up they should remain invisible.

I can’t see it happening in my demos on chrome.

14

It happens in the last demo you posted bNNLZNp Between rows 2 and 3, rows 4 and 5, rows 6 and 7, and continuing this pattern, only for the first three columns.
It is hard to see it on sitepoint because of its height, with only one row visible. But its evident in the demo if you scroll vertically, then horizontally. Even more evident full screen. It wouldn’t be affected by sticky left, as its a vertical gap. So padding top and/or bottom likely the issue.

15

I can’t seem to duplicate it here do you have a screenshot?

This is what I seewhen middle scrolled and vertical scrolled a bit.

Screenshot 2025-05-03 at 13.14.32
Screenshot 2025-05-03 at 13.14.322602×1580 357 KB

16

This is what I am seeing after a scroll vertical, then horizontal. Not all the horizontal borders are solid. It’s between rows 1 and 2, 3 and 4, 5 and 6 etc. Same applies between cols 1 and 2.
borders

17

What browser is that screenshot from.?

It looks like transparent borders on the sticky columns but there aren’t any in my codepen.

Do you see it on the actual codepen or is this copied to another page?

18

Chrome. Just copied the code. Changed the --cell-width to 100px.

19

Do you have a reset or something in your new page that is conflicting?

I can see no transparent borders anywhere. Here is a live codepen version oustide the editor.

Do you see the problem on that demo?

20

The issue with transparent border, if that is the issue, presents in sticky: V6 in codepen; not in the live version you just posted. I only changed the root --cell-width.