CSS Selector to select first and second table cells

Question

Can someone help me figure what selectors I need to change the width of my columns globally on my two column table?

Using this, will of course select all cells:

table td {
    width: 50px;
}

What I want is this:

<table>
    <tr>
        <td style="width: 50px">data in first column</td>
        <td style="width: 180px">data in second column</td>
    </tr>
    <tr>
        <td style="width: 50px">more data in first column</td>
        <td style="width: 180px">more data in second column</td>
    </tr>
</table>

I'd like to put the width specification in a style sheet rather then typing the width implicitly for each tag. What CSS selector will let me set the 50px width and 180px appropriately?

Answer 1

Yep.

td:first-child{
   width:50px;
}

td:nth-child(2){
   width: 180px;
}

or, as suggested by Brainslav's edit:

td:nth-child(1) {
      width: 50px;}
td:nth-child(2) {
      width: 180px;}

link