¿Por qué desbordamiento: oculto no funciona en un <td>?

146

Tengo una celda de tabla que siempre me gustaría tener un ancho particular. Sin embargo, no funciona con grandes cadenas de texto sin espacio. Aquí hay un caso de prueba:

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 fragmento

¿Cómo hago para que el texto se corte en el borde del cuadro, en lugar de hacer que el cuadro se expanda?

html css Miguel
fuente

205

Aquí está el mismo problema .

Es necesario que ajuste table-layout:fixed y una anchura adecuada en el elemento de la tabla, así como overflow:hiddeny white-space: nowrapen las celdas de la tabla.

Ejemplos

Columnas de ancho fijo

El ancho de la tabla tiene que ser el mismo (o más pequeño) que las celdas de ancho fijo.

Con una columna de ancho fijo:

Mostrar fragmento 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 fragmento

Con múltiples columnas de ancho fijo:

Mostrar fragmento 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 fragmento

Columnas de ancho fijo y fluido

Se debe establecer un ancho para la tabla , pero las celdas de fluido simplemente toman cualquier ancho adicional.

Con múltiples columnas, ancho fijo y ancho de fluido:

Mostrar fragmento 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 fragmento

misterManSam
fuente

21

Así son los TD's. Creo que puede deberse a que la propiedad 'display' del elemento TD está inherentemente establecida en 'table-cell' en lugar de 'block'.

En su caso, la alternativa puede ser envolver el contenido del TD en un DIV y aplicar ancho y desbordamiento al 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>

Puede haber algunos problemas de relleno o relleno de celdas para tratar, y es mejor eliminar los estilos en línea y usar CSS externo, pero esto debería ser un comienzo.

Andy Ford
fuente

Esto funciona, pero pierdo vertical-align:middlee incluso agregarlo al DIV no soluciona el problema.

Michael

10

Aplique CSS table-layout:fixed;(y a veces width:<any px or %>) a la TABLA y white-space: nowrap; overflow: hidden;estilo en TD. Luego establezca los anchos CSS en los elementos correctos de la celda o columna.

Significativamente, los anchos de columna de la tabla de diseño fijo están determinados por los anchos de celda en la primera fila de la tabla. Si hay elementos TH en la primera fila, y los anchos se aplican a TD (y no a TH), entonces el ancho solo se aplica al contenido del TD (el espacio en blanco y el desbordamiento pueden ignorarse); las columnas de la tabla se distribuirán de manera uniforme independientemente del ancho TD establecido (porque no hay anchos especificados [en TH en la primera fila]) y las columnas tendrán anchos [calculados] iguales; la tabla no volverá a calcular el ancho de columna en función del ancho de TD en las filas posteriores. Establezca el ancho en los primeros elementos de celda que encontrará la tabla.

Por otra parte, y de la forma más segura de ancho de las columnas de ajuste es utilizar <COLGROUP>y <COL>etiquetas en la tabla con el CSS ancho establecido en cada COL ancho fijo. El CSS relacionado con el ancho de celda funciona mejor cuando la tabla conoce de antemano los anchos de columna.

szozz
fuente

7

No estoy familiarizado con el problema específico, pero podría pegar un div, etc. dentro del td y configurar el desbordamiento en eso.

Oli
fuente

5

Bueno, aquí hay una solución para ti, pero realmente no entiendo por qué 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>

A saber, envolviendo el contenido de la celda en un div.

cletus
fuente

Esto se puede mejorar aún más como se muestra aquí , específicamente, overflow:hiddense puede eliminar tdy el ancho del divse puede establecer al 100% para que funcione con cualquier tdancho (¡incluidos los de tamaño automático!)

Roman Starkov

4

La mejor solución es poner un div en la celda de la tabla con ancho cero. Las celdas de la tabla Tbody heredarán sus anchos de los anchos definidos thead. Posición: margen relativo y negativo debería hacer el truco!

Aquí hay una captura de pantalla: 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
fuente

Debe usar tanto span como div, por supuesto, teniendo la configuración de bloque adecuada para span declarada en css. Como sé, td también debería contener div.

Gyula Surmann

3

Tendrá que establecer los atributos de estilo de la tabla: widthytable-layout: fixed; dejar que el 'desbordamiento: oculto'; El atributo funciona correctamente.

Imo esto funciona mejor que usar divs con el width atributo de estilo, especialmente cuando se usa para cálculos de cambio de tamaño dinámico, la tabla tendrá un DOM más simple que facilita la manipulación porque no se requieren correcciones para el relleno y el margen

Como extra, no tiene que establecer el ancho para todas las celdas sino solo para las celdas en la primera fila.

Me gusta esto:

<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
fuente

2

Acabo de tener un problema similar y tuve que usar el <div>interior <td>al principio (la solución de John MacIntyre no me funcionó por varias razones).

Sin embargo, <td><div>...</div></td>tenga en cuenta que no es una ubicación válida para un div, por lo que en su lugar estoy usando a <span>con display:block;set. Valida bien ahora y funciona.

Mera Desarrollo
fuente

1

La solución más fácil y simple que funciona:

table { table-layout: fixed }

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

Armin
fuente

0

para simplificar, propongo poner un área de texto dentro del td que gestiona automáticamente el desbordamiento

<td><textarea autofocus>$post_title</textarea></td>

necesita ser mejorado

Gilles Blanchard
fuente

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>

muestra 123456

Francesco Ruffo de Bonneval
fuente

¿Por qué desbordamiento: oculto no funciona en un <td>?

Respuestas:

Ejemplos

Columnas de ancho fijo

Columnas de ancho fijo y fluido