How do I select columns including colspans in a table?
Suppose 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 cells in the fourth column including td [colspan = "2"] that spans it with CSS?
+3
source to share
3 answers
This is not very good, 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, the selector does not exist to target different columns of a table.
+5
source to share
You can use nth-child on target elements in combination 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;
}
+1
source to share
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());
}
0
source to share