sarath mandava sarath mandava - 5 months ago 12
CSS Question

select nth column in a table

I wanted to change the

width
of the third
td
in the below
table




#mytable table > tr > td:nth-child(3) {
width: 600px !important;
}

<table id="mytable">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>





Can you please help me out

Answer

Two errors:

  1. Your selector: #mytable is already a table and has no table child,
    so use only #mytable
  2. The > in table > tr will not work since the browser adds tbody by default,
    therefore tr is an immediate child of tbody

#mytable{
  width:100%;
}
#mytable td:nth-child(3) {
  width: 600px; background:#eee;
}
<table id="mytable">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Comments