How do I select columns including colspans in a table? - html

Question

Assume I have a table that looks like this:
<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>
How do I select all the cells in the fourth column, including the td[colspan="2"] that spans to it with CSS?

Answer 1

It's not pretty but can be done with multiple selectors: 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;
}
But to answer your question no selector exists to target different table columns.

Answer 2

It has been awhile, but I was searching for this and came up with a better solution. A table can have multiple <tbody> elements and you can add a class to treat them differently.
<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>
You can then use nth-child selectors tailored to each tbody.

Answer 3

You can use nth-child to target elements in combination that with not and 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 4

CSS:
Demo on Fiddle
tr :nth-child(4), tr td[colspan="2"] {
color: red;
}
td {
border: 1px solid black;
}
jQuery:
Demo on 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());
}