Eu tenho uma célula de tabela que eu sempre gostaria de ter uma largura específica. No entanto, ele não funciona com grandes seqüências de texto não espaçadas. Aqui está um caso de teste:
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>Como faço para cortar o texto na borda da caixa, em vez de expandir a caixa?
Respostas:
Aqui está o mesmo problema .
É preciso conjunto table-layout:fixed e uma largura adequada no elemento de mesa, bem como overflow:hiddene white-space: nowrapsobre as células da tabela.
A largura da tabela deve ser a mesma (ou menor) que a (s) célula (s) de largura fixa.
Com uma coluna de largura fixa:
Com várias colunas de largura fixa:
Uma largura para a tabela deve ser definida , mas qualquer largura extra é simplesmente obtida pela (s) célula (s) do fluido.
Com várias colunas, largura fixa e largura do fluido:
É assim que os TD são. Eu acredito que pode ser porque a propriedade 'display' do elemento TD é inerentemente definida como 'table-cell' em vez de 'block'.
No seu caso, a alternativa pode ser envolver o conteúdo do TD em um DIV e aplicar largura e estouro ao DIV.
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>Pode haver alguns problemas de preenchimento ou preenchimento de célula, e é melhor remover os estilos inline e usar css externo, mas isso deve ser um começo.
Aplique CSS table-layout:fixed;(e às vezes width:<any px or %>) à TABELA e white-space: nowrap; overflow: hidden;estilo no TD. Em seguida, defina as larguras CSS nos elementos corretos da célula ou coluna.
Significativamente, as larguras das colunas da tabela de layout fixo são determinadas pelas larguras das células na primeira linha da tabela. Se houver elementos TH na primeira linha e as larguras forem aplicadas ao TD (e não ao TH), a largura se aplicará apenas ao conteúdo do TD (o espaço em branco e o excesso podem ser ignorados); as colunas da tabela serão distribuídas uniformemente, independentemente da largura do TD definida (porque não existem larguras especificadas [no TH na primeira linha]) e as colunas terão [calculadas] larguras iguais; a tabela não recalcula a largura da coluna com base na largura do TD nas linhas subseqüentes. Defina a largura nos primeiros elementos da célula que a tabela encontrará.
Como alternativa, a maneira mais segura de definir as larguras das colunas é usar tags <COLGROUP>e <COL>na tabela com a largura CSS definida em cada COL de largura fixa. O CSS relacionado à largura da célula é melhor quando a tabela conhece as larguras da coluna com antecedência.
Bem, aqui está uma solução para você, mas eu realmente não entendo por que funciona:
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>Ou seja, agrupando o conteúdo da célula em uma div.
overflow:hiddenpode ser removido tde a largura do arquivo divpode ser configurada para 100%, para que ele funcione com qualquer tdlargura (incluindo as de tamanho automático!)
A melhor solução é colocar uma div na célula da tabela com largura zero. As células da tabela Tbody herdarão suas larguras das larguras definidas no cabeçalho. Posição: margem relativa e negativa deve funcionar!
Aqui está uma captura de tela: https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>Você terá que definir os atributos de estilo da tabela: widthe table-layout: fixed;deixar o 'overflow: hidden;' atributo funciona corretamente.
Imo, isso funciona melhor do que usar divs com o widthatributo style, especialmente ao usá-lo para cálculos de redimensionamento dinâmico, a tabela terá um DOM mais simples que facilita a manipulação, pois não são necessárias correções no preenchimento e na margem
Como um extra, você não precisa definir a largura para todas as células, mas apenas para as células na primeira linha.
Como isso:
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>Acabei de ter um problema semelhante e tive que usar o <div>interior <td>primeiro (a solução de John MacIntyre não funcionou para mim por vários motivos).
Observe que esse <td><div>...</div></td>posicionamento não é válido para uma div. Em vez disso, estou usando um <span>com display:block;set. Ele valida bem agora e funciona.
para simplificar, proponho colocar uma área de texto dentro do td que gerencia automaticamente o overflow
<td><textarea autofocus>$post_title</textarea></td>
precisa melhorar
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>exibe 123456
vertical-align:middlee até adicioná-lo ao DIV não resolve o problema.