html - 某些 th 的 CSS 选择器

Question

假设图像(应要求更改为实际工作表)是html <table> 的示例有它的<th>实现不同的 colspan和 rowspan .在给定的图像中，是否有原生 css可以选择所有 <th> 的选择器直接与 <thead> 的底部水平边界相交或者实现此目的的唯一方法是为这些指定的单元格提供某些 class ？

Answer 1

有一种方法可以使用 nth-last-child 选择器和 rowspan 的组合来做到这一点，但是如果您希望它能够处理绝对任意组合。

该算法实际上是 tr:nth-last-child(x) th[rowspan >= x]

不幸的是，纯 CSS 不允许您这样写，因此您必须将其分解成多个部分。

基本上，您知道如果标题的最后一行中有任何内容，它将与边框相对。要捕获这些元素，你只需要选择最后一个tr中的所有th个元素:

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

然后事情就变得复杂了。其他第 th 元素将触及底部边框如果它们的 rowspan 足够高以跨越它们的行和边框之间的其余行。也就是说，如果它们在倒数第 2 个 tr 中，则它们需要 rowspan 为 2 才能触及底部。如果它们位于倒数第 4 行(在上面的示例中为第一行)，则它们需要 rowspan 为 4。因此，您可以这样做:

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 */ }

它不是很漂亮，但它可以工作，前提是您知道需要处理的最大行数，显然您需要将它们全部单独列出，前提是您希望将其保留为纯 CSS。

有漏洞 - th 可能在倒数第二行的行跨度为 3，这会触及底部，但我假设表格设计正确，因此这种不好的东西不会发生。如果你愿意，你可以考虑到这一点，但它会增加很多复杂性，因为你需要添加倒数第二行，rowspan >=2(CSS 不会在属性选择器中进行这样的数学运算，所以你会必须分别列出所有 >=2 个值)。

可能有一种方法可以使用 SASS 或 LESS 之类的东西来使这个更干净(在 JQuery 中肯定很容易做到)，但据我所知，没有纯 CSS 的方法来稍微清理一下。如果有人知道方法，请告诉我!

更新:我已经编辑了别人开始的 JSFiddle Here证明我的意思