Question

我有一个包含<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来解决它，只是想知道是否有更干净的方法。谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

.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。

如何选择表中的最后一行？

2 个答案: