Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thiago Nunes

Não consigo definir largura para a td

Recommended Posts

Galera, preciso de uma ajuda aqui.

 

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

 

tabela.jpg

 


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

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!




Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.