Ajustar a largura da célula ao conteúdo

Dada a marcação a seguir, como eu poderia usar o CSS para forçar uma célula (todas as células da coluna) a se ajustar à largura do conteúdo dentro dela, em vez de esticar (qual é o comportamento padrão)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

Edição: Eu sei que eu poderia codificar a largura, mas prefiro não fazer isso, pois o conteúdo que vai nessa coluna é dinâmico.

Olhando para a imagem abaixo, a primeira imagem é o que a marcação produz. A segunda imagem é o que eu quero.

Não sei se entendi sua pergunta, mas vou tentar. JSiddle do exemplo .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

Configuração

max-width:100%;
white-space:nowrap;

vai resolver o seu problema.

Para mim, este é o melhor ajuste automático e redimensionamento automático de tabelas e colunas (use css! Important ... somente se você não puder sem)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Não especifique a largura do css para a tabela ou para as colunas da tabela. Se o conteúdo da tabela for maior, ele passará do tamanho da tela para.

Definir a largura do CSS para 1% ou 100% de um elemento, de acordo com todas as especificações que eu pude descobrir, está relacionado ao pai. Embora o Blink Rendering Engine (Chrome) e o Gecko (Firefox) no momento da escrita pareçam lidar com 1% ou 100% (faça uma coluna encolher ou uma coluna para preencher o espaço disponível) bem, isso não é garantido de acordo com todas as especificações CSS Eu poderia encontrar para processá-lo corretamente.

Uma opção é substituir a tabela por divs flex do CSS4:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Isso funciona em novos navegadores, ou seja, IE11 +, veja a tabela na parte inferior do artigo.

Há muitas maneiras de fazer isso!

corrija-me se estiver errado, mas a pergunta está procurando esse tipo de resultado.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

Os 2 primeiros campos "compartilharão" a página restante (NOTA: se você adicionar mais texto aos campos de 50%, será necessário mais espaço) e o último campo dominará a tabela constantemente.

Se você deseja deixar o texto quebrar, pode mover o espaço em branco: nowrap; ao estilo do terceiro campo
será a única maneira de iniciar uma nova linha nesse campo.

Como alternativa, você pode definir um comprimento no último campo, ou seja. width: 150px e deixe porcentagens nos 2 primeiros campos.

Espero que isto ajude!

Simples:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>