I have the following CSS and HTML
.comTable {
width: 95%;
cellpadding: 2px;
margin: auto;
border-collapse: collapse;
}
.comTable td {
text-align: left;
}
.comTable td:first-child {
text-align: right;
width: 25%;
}
<table id="tableMain" class="comTable">
<tr>
<td>
Some texts 1
</td>
<td>
<table id="table2">
<tr>
<td>
Some more texts
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some texts 2
</td>
<td>
<table id="table3">
<tr>
<td>
Some more texts...
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
The problem is that the comTable CSS class is applied to table2 and table3, such that the first column of table2 and table3 are also set to 25%. How can I make it so that .comTable td:first-child will only apply to tableMain? Please note that I have quite too many rows in tableMain so as much as possible I don't want to apply a class to each first td there.
You can do
.comTable > tr > td:first-child {
text-align: right;
width: 25%;
}
to achieve the desired effect.
>
means that only first level children will be affected, and not children deep within.