Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Targeting specific column in table

Tags:

css

css-tables

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 
{

}
like image 327
John Doe Avatar asked Jul 02 '12 02:07

John Doe


People also ask

How do I select a specific column in a table in HTML?

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.

How do I select a specific column in CSS?

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.

How do I target a table column width in CSS?

<col width="120"> creates a column of 147px width, <col width="106"> creates a column width of of 110.

How do you select the first column of a table in CSS?

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.


1 Answers

This should work (except on IE8 and below):

table.players td:nth-child(2) { width: 200px; }
like image 127
bfavaretto Avatar answered Oct 02 '22 19:10

bfavaretto