Ajustar a largura da célula ao conteúdo

266

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.

insira a descrição da imagem aqui

html css html-table

— Mansfield
fonte

Eu não entendo sua pergunta. Deseja limitar a última coluna à largura específica?

— precisa saber é o seguinte

8

@diEcho eu pensei que era bastante claro. Vou adicionar uma foto ou duas.

— Mansfield

Possível duplicado da LARGURA coluna da tabela CSS

— Vadzim

451

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;
}

— MetalFrog
fonte

3

por que você escreve em <table style="width:100%">vez de<table width="100%" >

— diEcho

17

@diEcho Eu não escrevi essa parte, isso foi do código de exemplo. Independentemente disso, é uma má prática usar o atributo width nos elementos. Neste exemplo rápido, o CSS embutido é bom, mas deve ser abstraído para um arquivo se esse for o código no nível de produção.

— MetalFrog

45

Uma maneira mais limpa de fazer isso IMO seria definir um estilo chamado "nostretch" (ou algo parecido) e, em seguida, apenas definir nostretch no CSS para ter largura: 1% e nowrap. Então o último TD teria 'class = "nostretch block"'. Dessa forma, você pode "nostretch" qualquer célula que desejar.

— Tim Holt

3

Esta é uma boa solução, mas, infelizmente, no Bootstrap 3, meus grupos de botões serão agrupados com isso: jsfiddle.net/wexdX/326 Alguma idéia de como posso suprimi-la?

— Martin Braun

5

Isso só funciona quando o conteúdo é maior que a largura: 1% - certo? Como se o conteúdo for menor que a largura: 1%, a célula será maior.

— Adam

44

Configuração

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

vai resolver o seu problema.

— Shubham Nigam
fonte

8

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.

— myset
fonte

3

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.

— Mladen Adamovic
fonte

1

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!

— Christian Newman
fonte

-1

Simples:

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

— Parth Jani
fonte