Como posso definir a largura máxima de uma célula da tabela usando porcentagens?

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

O acima não funciona. Como posso definir a largura máxima de uma célula da tabela usando porcentagens?

De acordo com a definição de largura máxima nas especificações CSS 2.1, “o efeito de 'largura mínima' e 'largura máxima' em tabelas, tabelas embutidas, células de tabela, colunas de tabela e grupos de colunas é indefinido.” Portanto, você não pode definir diretamente a largura máxima em um elemento td.

Se você quiser que a segunda coluna ocupe no máximo 67%, você pode definir a largura (que é, na verdade, a largura mínima, para células da tabela) para 33%, por exemplo, no caso de exemplo

td:first-child { width: 33% ;}

Definir isso para ambas as colunas não funcionará muito bem, pois tende a fazer com que os navegadores dêem às colunas a mesma largura.

Uma pergunta antiga eu sei, mas agora isso é possível usando a propriedade css table-layout: fixedna tag da tabela. Responda abaixo a partir desta questão CSS largura percentual e estouro de texto em uma célula da tabela

Isso é feito facilmente usando table-layout: fixed, mas um pouco complicado porque poucas pessoas sabem sobre essa propriedade CSS.

table {
  width: 100%;
  table-layout: fixed;
}

Veja-o em ação no violino atualizado aqui: http://jsfiddle.net/Fm5bM/4/

Sei que isso aconteceu literalmente um ano depois, mas achei melhor compartilhar. Eu estava tentando fazer a mesma coisa e me deparei com essa solução que funcionou para mim. Definimos uma largura máxima para a tabela inteira e, em seguida, trabalhamos com os tamanhos das células para o efeito desejado.

Coloque a tabela em seu próprio div e, em seguida, defina a largura, largura mínima e / ou largura máxima do div conforme desejado para a tabela inteira. Em seguida, você pode trabalhar e definir a largura e as larguras mínimas para outras células e a largura máxima para o div trabalhando efetivamente ao redor e para trás para atingir a largura máxima que desejamos.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Então, em seus estilos, coloque:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Reconhecidamente, isso não dá a você uma largura "máxima" de uma célula por si só, mas permite algum controle que pode funcionar no lugar de tal opção. Não tenho certeza se funcionará para suas necessidades. Sei que funcionou para a nossa situação, em que queremos que o lado da navegação na página seja escalonado para cima e para baixo até um ponto, mas para todas as telas grandes hoje em dia.

a porcentagem deve ser relativa a um tamanho absoluto, tente isto:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>