Change column width of table with table-layout: fixed with CSS

Question

I have this markup

<table class="small" style="table-layout: fixed;" width="600px" cellspacing="0">
    <col style="100px" />
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="360px;" />
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:500px;" colspan="8">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:40px;" colspan="2">.</td>
      <td style="width:40px;" colspan="2">.</td>
      <td style="width:420px;" colspan="4">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:100px;" colspan="5">.</td>
      <td style="width:400px;" colspan="3" align="right">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;background:red;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;background:red;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:3600px;">.</td>
    </tr>
    <tr>
      <td style="width:200px;" colspan="6">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:200px;" colspan="6">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
  </table>

I am trying to change the width of the first and last column. Setting the width of the first column to 100px seems to work, however trying to set the width of the last column to 360px doesn't?

What am I doing wrong here? Have tried a bunch of things. Setting the widths of every cell (above) and setting the widths of the cells I just want changed (row 1 cell 1 and row 4 cell 9).

Here is a JSFiddle to demonstrate: table layout example

Answer 1

One of your rows says 3600!

<tr>
  <td style="width:100px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;background:red;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:3600px;">.</td>
</tr>

Best.(screen)resolution.ever.

Answer 2

In your col style definitions you are not specifying what property you are resizing. It should be:

<col style="width: 100px" />