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.
fonte
Respostas:
whitespace-wrap: nowrap
não é css válido. É o quewhite-space: nowrap
você está procurando.fonte
Isso funciona no Google Chrome, pelo menos. ( jsFiddle )
fonte
width
abordagem para minhas necessidades, pois tenho várias colunas largas (em vez de uma coluna larga, pois a solução acima funciona melhor). I removidowidth: 99%
a partirexpand
e acrescentouwidth: 1%
queshrink
e esta solução funcionou bem para mim!td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}
- Para o caso de aparecer algum novato. :)col
'sclass
valor atributos' para a mesa correspondentetd
sUsando 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.
fonte
width: 1px;
ao estilo não-último filho para fazer com que as colunas não-últimas sejam renderizadas com largura mínima.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):
Solução simples:
HTML
CSS
As colunas com classe
shrink
apenas se expandem até a largura mínima, mas outras permanecem dinâmicas. Isso funciona por causawidth
detd
é automaticamente expandido para caber o conteúdo inteiro.Snippet de exemplo
Exibir trecho de código
fonte
Você pode definir a largura fixa, colocando a
div
tag dentrotd
https://jsfiddle.net/8bf17o1v/
fonte
Se você precisar de várias linhas de texto na célula da tabela.
Não use
white-space: nowrap
use emwhite-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:Demonstração no CodePen
fonte
Uma combinação de
white-space: nowrap
ouwhite-space: pre
commin-width: <size>
fará o trabalho.width: <size>
em si não é suficiente para impedir que a mesa aperte.fonte