Como defino as larguras das células da tabela para o mínimo, exceto a última coluna?


107

Tenho uma mesa com 100% de largura. Se eu colocar <td>s nele, eles se espalharão com colunas de comprimento igual. No entanto, quero que todas as colunas, exceto a última, tenham a menor largura possível, sem quebrar o texto.

O que fiz primeiro foi definir width="1px"todos os <td>s, exceto o último (embora tenha sido descontinuado, mas style="width:1px"não teve nenhum efeito), o que funcionou bem até que eu tivesse dados com várias palavras na coluna. Nesse caso, para manter o comprimento o menor possível, envolveu meu texto.

Deixe-me demonstrar. Imagine esta mesa:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

Não importa o que eu tente, o que sempre consigo é:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

ou (embora eu configure style="whitespace-wrap:nowrap") isto:

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

Quero pegar a mesa que apresentei primeiro. Como faço para conseguir isso? (Prefiro seguir o padrão e usar CSS. Sinceramente, não me importo se o IE também não implementou parte do padrão)

Mais explicação: o que eu preciso é manter as colunas o mais curtas possível, sem agrupar palavras (a última coluna deve ser tão grande quanto necessário para que a largura da tabela realmente alcance 100%). Se você conhece LaTeX, o que eu quero é como as tabelas aparecem naturalmente em LaTeX quando você define sua largura para 100%.

Nota: eu encontrei isso, mas ainda me dá o mesmo que a tabela anterior.


Aparentemente é! Um embaraçoso também, visto que acabei de interpretar mal o campo css.
Shahbaz de

Respostas:


54

whitespace-wrap: nowrapnão é css válido. É o que white-space: nowrapvocê está procurando.


97

Isso funciona no Google Chrome, pelo menos. ( jsFiddle )

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}
<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>


7
Fez meu dia também :) <3
Kaan Soral

10
Tive que mudar a widthabordagem para minhas necessidades, pois tenho várias colunas largas (em vez de uma coluna larga, pois a solução acima funciona melhor). I removido width: 99%a partir expande acrescentou width: 1%que shrinke esta solução funcionou bem para mim!
Campbeln

2
Encantador! Se você quiser que a mesma coluna seja expandida, em vez de marcar tudo com uma classe, eu fiz o seguinte: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}- Para o caso de aparecer algum novato. :)
ElizaWy

@ElizaWy Neste resposta ( stackoverflow.com/questions/9623601/... ) Eu criei um script jQuery, que permite que você copie os col's classvalor atributos' para a mesa correspondente tds
yunzen

36
td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

Usando o código acima, a última célula da tabela tentará ser a maior possível e você evitará que as anteriores se quebrem. Isso faz o mesmo que as outras respostas dadas, mas de forma mais eficiente.


Ame a simplicidade.
juanmirocks,

3
FYI, pelo menos no IE11 (modo de borda), tem que adicionar width: 1px;ao estilo não-último filho para fazer com que as colunas não-últimas sejam renderizadas com largura mínima.
ewh

Claramente a solução mais limpa nesta página! 👍
BoD

13

Tópico um pouco diferente, mas talvez ajude alguém que tropeça nessa questão como eu.
(Acabei de ver o comentário de Campbeln que sugere exatamente isso depois de escrever minha resposta abaixo, então esta é basicamente uma explicação detalhada de seu comentário)

Eu tive o problema ao contrário: eu queria definir uma coluna da tabela com a largura mínima possível sem quebrá-la no espaço em branco (última coluna no exemplo a seguir), mas a largura da outra deve ser dinâmica (incluindo quebras de linha):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

Solução simples:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

As colunas com classe shrinkapenas se expandem até a largura mínima, mas outras permanecem dinâmicas. Isso funciona por causa widthdetd é automaticamente expandido para caber o conteúdo inteiro.

Snippet de exemplo


3

Você pode definir a largura fixa, colocando a divtag dentrotd

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}
<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/


1

Se você precisar de várias linhas de texto na célula da tabela.

Não use white-space: nowrapuse em white-space: pre;vez disso.

Na célula da tabela, evite qualquer formato de código, como novas linhas e recuo (espaço em branco) e use <br>para definir uma nova linha / linha de texto. Como isso:

<td>element1<br><strong>second row</strong></td>

Demonstração no CodePen


0

Uma combinação de white-space: nowrapou white-space: precom min-width: <size>fará o trabalho. width: <size>em si não é suficiente para impedir que a mesa aperte.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.