select nth column in a table - html

Question

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 1

Two errors:
Your selector: #mytable is already a table and has no table child,
so use only #mytable
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>

Answer 2

#mytable table means that the CSS is trying to find an element with the ID of mytable and within that element looking for a <table>. You also do not need to be that specific; the following would achieve your goals:
#mytable tr td:nth-child(3) { width: 600px; }

Answer 3

This should be Visually more clear to you
Below is Snippet
.tblcommission{
border:1px solid black;
}
.tblcommission thead tr td:nth-child(2){
border:1px solid red;
background-color:red;
color:white;
}
.tblcommission tbody tr td:nth-child(2){
border:1px solid black;
background-color:blue;
color:white;
width:200px;
}
<table class="tblcommission">
<thead>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
</tr>
</thead>
<tbody>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
</tbody>
</table>