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

Question

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

<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 =＆＃34; 2＆＃34;]？

Answer 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;
}

但是为了回答你的问题，没有选择器可以定位不同的表列。

Answer 2

您可以使用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;
}

Answer 3

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());
}

Answer 4

已经有一段时间了，但是我一直在寻找并提出一个更好的解决方案。一个表可以有多个<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>

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