如何选择表格中的最后一个行跨度？

Posted 2023-03-06

【中文标题】如何选择表格中的最后一个行跨度？

【英文标题】：How to select the last rowspan in a table?

【发布时间】：2016-04-23 00:36:57

【问题描述】：

我有一张桌子，上面有一些<td>s，其中一些有rowspan 属性。我正在尝试选择表格中的最后一个，last-child 和 last-of-type 都不起作用。

这是一个 jsfiddle：https://jsfiddle.net/p2cjwvj5/

<table class='myTable' border='1'>
    <tr>
        <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td rowspan='3'>HEADER2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
</table>

.myTable [rowspan]:last-of-type 
    color: red;

我正在尝试选择包含“HEADER2”的单元格。

这可能吗？我知道我可以通过用另一个类标记最后一个rowspan 来解决它，只是想知道是否有更清洁的方法。谢谢！

【问题讨论】：

据我所知，仅靠 CSS 是不可能的。

CSS: How to say .class:last-of-type [classes, not elements!]的可能重复

不编辑html仍然无法实现。但是由于我是在后端分组生成表格，所以我可以轻松地添加tbody 标记。因此，下面 Pangloss 提供的解决方案是一个可以接受的解决方案，它仍然比我所做的解决方法更干净。谢谢大家！

为什么要删除？我给你答案:(

【参考方案1】：

您可以将每组<tr>s 包装成一个<tbody>，然后使用:last-of-type 或:last-child 选择最后一个tbody 就可以了。

.myTable tbody:last-of-type td[rowspan] 
  color: red;

<table class='myTable' border='1'>
  <tbody>
    <tr>
      <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
      <td>something</td>
    </tr>
    <tr>
      <td>something</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan='3'>HEADER2</td>
    </tr>
    <tr>
      <td>something2</td>
    </tr>
    <tr>
      <td>something2</td>
    </tr>
  </tbody>
</table>

【参考方案2】：

如果您不想添加更多 <tbody>s，您可以随时在最后一个 rowspan-ed 表格单元格中放置一个类，例如：

.myTable .lastRowspannedCell 
    color: red;

<table class='myTable' border='1'>
    <tr>
        <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
</table>

我不知道你的后端代码的结构，所以假设你可以预先知道一个组是否是最后一个组。

作为奖励，不使用 :last-of-type/:last-child 选择器可以让您获得更好的 IE8 兼容性，如果您关心的话。