Why TD width is not working or not followed?

I highly believe the answer to this question is such:

The priority of widths that will affect the TD is

1. Table Width

2. Parent Element Width (and if none, Viewport)

3. Element(TD) Width.

Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.

Edit

1. Table width will always override TD width.

2. Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.

Actually the table width depends on the cell width when you do not specify the table width. But when you specify the table width it will ignore the td width. Look at the following example:

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

If you use

td { 
  width:500px;
}

then the table width will be 1000px.

But if you use

table {
  width:500px;
} 
td { 
  width:500px;
}

it will ignore the <td> width and the table width will be 500px.

Have you tried adding display:inline-block to your TD CSS? That forces the browser to not ignore your TD width.