So the code below is how I want the table to look. But I was wondering if I could achieve the same thing using the direct descendant CSS selector combinator (next code snippet).
.tabs td.line + td.line {
border-left: 1px solid grey;
}
<table cellspacing="0" cellpadding="0" class="tabs" style="border-bottom: 5px solid black" width="100%">
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td valign="center" align="center" style="padding: 10px 0" class="line">
<table>
<tr>
<td>
something
</td>
<td valign="center">
something else
</td>
</tr>
</table>
</td>
<td valign="center" align="center" style="padding: 10px 0" class="line">
<table>
<tr>
<td>
something
</td>
<td valign="center">
something else
</td>
</tr>
</table>
</td>
<td valign="center" align="center" style="padding: 10px 0" class="line">
<table>
<tr>
<td>
something
</td>
<td valign="center">
something else
</td>
</tr>
</table>
</td>
</tr>
</table>
This doesn't work as expected. Was expecting it to go to first table, find direct descendant tr
and apply it to direct descendant td
.
.tabs > tr > td + td {
border-left: 1px solid grey;
}
<table cellspacing="0" cellpadding="0" class="tabs" style="border-bottom: 5px solid black" width="100%">
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td valign="center" align="center" style="padding: 10px 0" class="line">
<table>
<tr>
<td>
something
</td>
<td valign="center">
something else
</td>
</tr>
</table>
</td>
<td valign="center" align="center" style="padding: 10px 0" class="line">
<table>
<tr>
<td>
something
</td>
<td valign="center">
something else
</td>
</tr>
</table>
</td>
<td valign="center" align="center" style="padding: 10px 0" class="line">
<table>
<tr>
<td>
something
</td>
<td valign="center">
something else
</td>
</tr>
</table>
</td>
</tr>
</table>
Basically wondering only about the css part.