Não consigo definir largura para a td

Galera, preciso de uma ajuda aqui.

Estou criando uma tabela, e quero que o resultado final seja esse:

/applications/core/interface/imageproxy/imageproxy.php?img=https://lh3.googleusercontent.com/-Kad3DTnRaL8/UbdUa6YTzTI/AAAAAAAAAOk/u4LWWU9Oywk/w458-h218-no/tabela.jpg&key=9a24243802665ec129439677a583f66154d29e9db58ddf0dacd86bf31875f49f" alt="tabela.jpg" />

Acontece que não estou conseguindo determinar a largura das colunas e estou obtendo esse resultado:

/applications/core/interface/imageproxy/imageproxy.php?img=https://lh3.googleusercontent.com/-2zqJwR8iwyI/UbdYiIE7i2I/AAAAAAAAAO8/RTuhZQ_cDUk/s487/tabela2.jpg&key=1b8f44c8cf58a3c3f63b2678351a8a6729bd8ead799f37ffd276ab2a2c993f5f" alt="tabela2.jpg" />

Gostaria que a coluna de classe "col2" que fica dentro da thead ficasse com 313px, mas como pode ser visto na imagem acima, a coluna não está assumindo o valor setado no CSS ficando esse espaço em branco ao lado.

Além disso, não consigo setar a largura da td com classe "col1", no css estou dizendo que ela deveria ter 25px, mas como podem ver não surte efeito algum. Desejo setar os seguintes valores para as células:

/ thead /

#main-content .sessao .sessao-conteudo .sessao-form table thead tr th.col1 { border-right: solid #18b29b 1px; width: 118px }
#main-content .sessao .sessao-conteudo .sessao-form table thead tr th.col2 { width: 313px }

/ tbody /

#main-content .sessao .sessao-conteudo .sessao-form table tr td.col1 { border-left: solid #ebebeb 1px; width: 25px }
#main-content .sessao .sessao-conteudo .sessao-form table tbody tr td.col2 { border-left: solid #ebebeb 1px; border-right: solid #ebebeb 1px; width: 91px }
#main-content .sessao .sessao-conteudo .sessao-form table tbody tr td.col3 { width: 313px }

Acontece que nenhuma das larguras definidas no css surtem resultado, o código completo pode ser visualizado aqui: http://jsfiddle.net/thiagonunes/A6dhZ/

Podem me ajudar?

Obrigado!