Por que o overflow: hidden não funciona em um <td>?

146

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>

Expandir snippet

Como faço para cortar o texto na borda da caixa, em vez de expandir a caixa?

html css Mike
fonte

205

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.

Exemplos

Colunas de largura fixa

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:

Mostrar snippet de código

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Expandir snippet

Com várias colunas de largura fixa:

Mostrar snippet de código

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Expandir snippet

Colunas de largura fixa e fluida

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:

Mostrar snippet de código

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Expandir snippet

misterManSam
fonte

21

É 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.

Andy Ford
fonte

Isso funciona, mas eu perco vertical-align:middlee até adicioná-lo ao DIV não resolve o problema.

Michael

10

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.

szozz
fonte

7

Eu não estou familiarizado com o problema específico, mas você pode colocar um div, etc dentro do td e definir um excesso nele.

Oli
fonte

5

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.

cleto
fonte

Isso pode ser aprimorado ainda mais como mostrado aqui - especificamente, 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!)

Roman Starkov

4

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>

Gyula Surmann
fonte

Você deve usar span e div, é claro, tendo configurações de bloco adequadas para span declaradas em css. Como eu sei, td deve conter div também.

Gyula Surmann

3

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>

Wilko Gesink
fonte

2

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.

Mero Desenvolvimento
fonte

1

Solução mais fácil e simples que funciona:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

Armin
fonte

0

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

Gilles Blanchard
fonte

0

<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

Francesco Ruffo de Bonneval
fonte

Por que o overflow: hidden não funciona em um <td>?

Respostas:

Exemplos

Colunas de largura fixa

Colunas de largura fixa e fluida