Hey there, I'm looking to style only the first <td> (specifically those with the text "label") in each row of a table. If we have a simple HTML structure like this:
<table>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
<tr><td>label</td> <td>value</td></tr>
</table>
I want to apply a width of 10% only to the first group of <td></td> elements without using a class selector.
I've tested different selectors for this task:
table.widget tr:first-child td{
width:10%;
border:0;
}
However, this selector only targets the first td in the first tr, not all the TD's. So, I also tried:
table.widget tr td:first-child{
max-width:10%;
}
Unfortunately, this selects the first child of the TD, rather than the td itself.
Is there a way to achieve this styling effect?