Não consigo definir largura para a td

[Thiago Nunes 0]

Galera, preciso de uma ajuda aqui.

 

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

 

 

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

 

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!

[Public2004 79]

Amigo, você está utilizando uma tabela com 3 colunas no corpo mas no "head" da mesma há apenas 2 colunas. Tem que seguir a estrutura. Se a quantidade de colunas do "head" é diferente do corpo, faça um agrupamento nessas utilizando "colspan" para igualar com a quantidade do corpo. Isso vale também para o rodapé <tfoot>.

 

Att.

[Thiago Nunes 0]

Amigo, poderia dar um exemplo prático? É que nunca usei esse atributo, achei esse site aqui: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html que explica como usá-lo, mas não sei como faria no meu caso, já que tenho duas th's na thead.

Poderia ajudar?

Obrigado!

[Public2004 79]

Segue:

<table>
  <thead>
    <th>Col 1</th>
    <th colspan="2">Col 2 + Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>Content Col 1</td>
      <td>Content Col 2</td>
      <td>Content Col 3</td>
    </tr>
  </tbody>
</table>

Att.

[Thiago Nunes 0]

Public2004,

Fiz o que você falou: http://jsfiddle.net/thiagonunes/Ew4nr/, mas ainda não estou conseguindo definir uma largura para as td's. Defini uma largura de 118px para a th de classe "col1" que está dentro da thead, mas a mesma está ficando com 106px, ou seja, não corresponde ao valor declarado, e para as demais, mesmo que eu defina qualquer valor nada ocorre.

O que pode ser?

Obrigado pela ajuda!

[Public2004 79]

Veja este exemplo bem enxuto:

 

CSS:

table {
    border-collapse: collapse;
    border: #ccc 1px solid;
    width: 500px;
}
thead th {
    background: #21cdb3;
}
table tr, th, td {
    padding: 10px;
    border: #ccc 1px solid;
}
table tr td {
    width: 10%;
}
table tr td+td {
    width: 30%;
}
table tr td+td+td {
    width: 60%;
}

 

HTML:

<table>
  <thead>
    <th colspan="2">Col 1 + Col 2</th>
    <th>Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>Content Col 1</td>
      <td>Content Col 2</td>
      <td>Content Col 3</td>
    </tr>
  </tbody>
</table>

 

Esta é a base (estrutura da tabela) para atingir seu objetivo de acordo com a imagem "post1" - O code está bem enxuto e é de fácil compreensão. O resto é estilização ao seu gosto, cores, largura colunas, bordas, etc.

 

Att.

[Thiago Nunes 0]

Obrigado amigo, esclareceu bastante!