CODEWITHSUNDEEP
htmlcss
Gideon
Gideon

Reputation: 1507

CSS selector for certain th

enter image description here

Assuming the image (changed to the actual working table due to request) is an example of a html <table> having its <th> implementing varying colspan and rowspan. In the given image, is there a native css selector that can select all the <th> that meets directly the bottom horizontal boundary of the <thead> or the only way to achieve this is to provide these specified cells with certain class?

Upvotes: 0

Views: 1987

Answers (2)

Ieuan Stanley
Ieuan Stanley

Reputation: 1258

There is a way to do this using a combination of the nth-last-child selector and rowspan, but it will look a bit complicated and clunky if you want it to be able to deal with absolutely any combination.

The algorithm is effectively tr:nth-last-child(x) th[rowspan >= x]

Unfortunately, pure CSS doesn't allow you to write this, so you have to break it down into parts.

Basically, you know that if anything is in the last row of the header, it's going to be up against the border. To catch these elements, you just need to select all th elements in the last tr:

tr:last-child th { /*your CSS*/ }

Then it gets complicated. Other th elements will touch against the bottom border if their rowspan is high enough that they span the rest of the rows between their row and the border. That is to say, if they are in the 2nd-last tr, they need a rowspan of 2 in order to touch the bottom. If they are in the 4th-last row (in the example above, the first row), then they need a rowspan of 4. So, you can do this:

tr:nth-last-child(2) th[rowspan='2'],
tr:nth-last-child(3) th[rowspan='3'],
tr:nth-last-child(4) th[rowspan='4'] { /*Your CSS */ }

It's not pretty, but it works, provided you know the maximum amount of rows you need to contend with, as obviously you need to list them all separately provided you want to keep it to pure CSS.

There are holes - it's possible that a th could have a rowspan of 3 in the 2nd last row which would touch the bottom, but I'm making the assumption that the table is correctly designed such that this sort of bad stuff doesn't happen. If you wanted to you could account for that but it would add a LOT of complexity, as you'd need to add 2nd last row, rowspan >=2 (CSS doesn't do mathematical operations like this in attribute selectors so you'd have to list all >=2 values separately).

There may be a way to make this cleaner using something like SASS or LESS (definitely it would be easy to do in JQuery), but as far as I am aware there is no pure CSS way to clean it up a bit. If anyone knows of a way, let me know!

UPDATE: I've created an edit of the JSFiddle someone else started Here to demonstrate what I mean

Upvotes: 3

Emma Ramirez
Emma Ramirez

Reputation: 1111

Yup, you can catch these with a mix of attribute selectors and, if needed, nth-of-type().

So, for example:

th[colspan="1"]

th[rowspan="4"]

th[colspan="1"]:nth-of-type(2)

are all valid CSS selectors that can catch what you want.

And of course, the :nth-of-type(n) selector could be attached to the parent to act as a "filter" for selecting th's with a certain colspan.

Upvotes: 0

Related Questions