I have a table of class players
with 5 columns and 40 rows. I want to make the second column have width: 200px
.
I can not figure out how to select the specific column in the table. So far I have narrowed it down to this, but this does it to all of the rows in the table. Can someone help me set the column width for a specific column?
table.players td
{
}
In Mozilla Firefox, users may highlight only certain rows, columns, or cells of an HTML table by holding down the Ctrl on the keyboard and click each cell individually.
If you want to apply a style to a specific column or row (but not on others), use :nth-child() property from CSS3. This selector is used to apply a style to the element number 'n' inside a parent element.
<col width="120"> creates a column of 147px width, <col width="106"> creates a column width of of 110.
The syntax is :nth-child(an+b), where you replace a and b by numbers of your choice. For instance, :nth-child(3n+1) selects the 1st, 4th, 7th etc. child.
This should work (except on IE8 and below):
table.players td:nth-child(2) { width: 200px; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With