CSS: uma forma simples de definir a largura das colunas de uma tabela

Eis uma forma muito simples de dimensionar as colunas da sua tabela com poucas linhas de CSS, em vez de colocar valores inline em cada célula. Este método facilita muito a criação de tabelas responsivas.

Demonstração: o resultado

CSS

Copie o código abaixo e cole-o no seu ficheiro CSS.

table tr td { padding: 20px; }
table td:nth-child(1) { width: 35%; }
table td:nth-child(2) { width: 15%; }
table td:nth-child(3) { width: 5%; }
table td:nth-child(4) { width: 35%; }
table td:nth-child(5) { width: 10%; }

HTML

Copie o código abaixo e cole-o no seu documento HTML.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

Pode copiar o CSS e o HTML para o seu ficheiro e ajustá-los como quiser!

Nota: estes seletores afetam todas as tabelas da página. Para os limitar a uma só tabela, coloque uma classe antes de cada seletor, por exemplo .my-table td:nth-child(1). Além disso, o preenchimento e o conteúdo definem uma largura mínima, pelo que colunas muito estreitas (como a de 5 %) podem ficar mais largas do que o indicado.