Kevin Powell - Community•2w ago

How to get 'sticky' column to work in table with a colspan?

I have a complex table -- see screenshot of top left. Requires scrolling in both dimensions. I have got the sticky working for header row and first column OK, using:

.perspectives-table th:first-child, td:first-child {
left: 0;
position: sticky;
z-index: 10;
}

.perspectives-table th:first-child, td:first-child {
left: 0;
position: sticky;
z-index: 10;
}

Except for the sub-heading rows, for example "What to include and exclude", "Moving/Scheduling Items". These are <td colspan="6" class="sticky-column"</td>. Those sub-headings scroll horizontally. How can I stop this, please?

6 Replies

jgclarkOP•2w ago

My AI suggests adding a selector td[colspan], but even if that's a thing, it doesn't seem to help.

Jochem•2w ago

td[colspan] will select any TD with a colspan attribute set on it, which you could use to target them for a overflow: hidden;. It's hard to say what would be a better solution without a live example though

jgclarkOP•2w ago

Thanks. That didn't help by itself, but I then tried making it colspan="3" and together that works. I don't fully understand this, but perhaps its a way forward.

Jochem•2w ago

which part do you not understand? (genuine question btw, it's always better to understand a solution so you can use it again later!)

jgclarkOP•2w ago

Thanks. What I don't understand (yet) is why does colspan 6 move, but colspan 3 not move?

Jochem•2w ago

I think it has to do more with the content than with the colspan. It's not really possible to tell without seeing the code in my own browser though

Gaming

Programming

How to get 'sticky' column to work in table with a colspan?

Did you find this page helpful?