如何在表格中选择包括 colspans 的列？

Posted 2023-03-06

【中文标题】如何在表格中选择包括 colspans 的列？

【英文标题】：How do I select columns including colspans in a table?

【发布时间】：2014-12-12 01:45:17

【问题描述】：

假设我有一个如下所示的表格：

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td></td>
    <td colspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="2"></td>
    <td></td>
    <td colspan="2"></td>
  </tr>
</table>

如何选择第四列中的所有单元格，包括使用 CSS 跨越它的 td[colspan="2"]？

【问题讨论】：

“选择所有单元格”是什么意思？您是否尝试将这些单元格设置为相同的样式？

@BrianBennett 是的，抱歉，我编辑了这个问题 :)

不确定是否可以使用 CSS 执行此操作，因为您会尝试选择多个属性 (jsfiddle.net/qwvxzjkv/2)

是的，这个很难，因为表列的索引不同。 codepen.io/bbennett/pen/pGnxH

【参考方案1】：

这不是很漂亮，但可以使用多个选择器来完成：http://jsfiddle.net/r4atjtfx/1/

tr:first-child td:nth-child(4),
tr:first-child + tr td[colspan="2"] ~ td[colspan="2"],
tr:last-child td:nth-child(3) 
    color: orange;

但要回答您的问题，不存在针对不同表列的选择器。

【讨论】：

不错的方法，但我认为对每种情况都太具体了......不是一般的解决方案。

@Danko：没错，这就是我编辑的原因，因为我现在意识到 OP 正在寻找一个特定的选择器来定位不同的表列（它不存在）。

是的，但仍然是他可以用 CSS +1 做的最好的事情

【参考方案2】：

已经有一段时间了，但我一直在寻找这个并想出了一个更好的解决方案。一个表可以有多个<tbody> 元素，您可以添加一个类来区别对待它们。

<table>
  <tbody class="first">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </tbody>
  <tbody class="second">
  <tr>
    <td colspan="2"></td>
    <td></td>
    <td colspan="2"></td>
    <td></td>
  </tr>
  </tbody>
  <tbody class="third">
  <tr>
    <td></td>
    <td colspan="2"></td>
    <td></td>
    <td colspan="2"></td>
  </tr>
  </tbody>
</table>

然后您可以使用为每个tbody 量身定制的nth-child 选择器。

【参考方案3】：

您可以使用 nth-child 与 not 和 attr 组合来定位元素。

DEMO

tr>td:not([colspan])+td:nth-child(4):not([colspan]) 
    background-color: yellowgreen;

tr>td[colspan]:nth-child(3) 
    background-color: yellowgreen;

tr>td[colspan]:nth-child(2)+td 
    background-color: yellowgreen;

【参考方案4】：

CSS：

Fiddle 上的演示

tr :nth-child(4), tr td[colspan="2"] 
    color: red;

td 
    border: 1px solid black;

jQuery:

Fiddle 上的演示

for (i = 1; i < document.getElementsByTagName('tr').length * 2; i++) 
    console.log($('table :nth-child(' + i +') :nth-child(4)').html());
    console.log($('table :nth-child(' + i + ') td[colspan="2"]').html());