desbordamiento: oculto no funciona cuando se usan las tablas

Tengo problemas con largas cadenas de texto extendiendo mis tablas y overflow:hidden no parece estar haciendo lo que hago. Aquí está el código de ejemplo que estoy utilizando para probar este efecto:desbordamiento: oculto no funciona cuando se usan las tablas

<html> 
    <head> 
     <style type="text/css"> 
      td.scroll 
      { 
       background-color:#00FFFF; 
       width:100px; 
       height:100px; 
       overflow:scroll; 
      } 
      td.hidden 
      { 
       background-color:#00FF00; 
       width:100px; 
       height:100px; 
       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table width="100%"> 
      <tr> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

Cuando se carga, el texto, independientemente de la anchura de la tabla, estirarse para mostrar toda la cadena. Lo que busco es que no se muestre ninguna parte de la cadena que vaya más allá de la medición de la celda. ¿Esto es posible incluso con tablas, y si es así, qué estoy haciendo mal?

Fuente

2009-10-29 canadiancreed

El desbordamiento solo funciona en elementos de nivel de bloque. Los elementos de la tabla no son elementos de bloque. Si desea obtener esos efectos, coloque un <div> dentro de la celda de la tabla y aplique los efectos al <div>.

td.scroll div { 
    background-color: #00FFFF; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
} 

td.hidden div { 
    background-color: #00FF00; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
}

con:

<table width="100%"> 
<tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 
</table>

Fuente

2009-10-29 14:45:51 cletus

Eso lo hizo. Muchas gracias por esto y guardar lo que queda de mi cabello! Creo que necesito leer mi CSS un poco más. – canadiancreed

Es un aspecto bastante arcano para CSS. La única vez que alguien lo descubre es cuando tienen este problema exacto. Créanme, he estado allí hecho eso. – cletus

CSS 2.1 dice que 'overflow' funciona en celdas de tabla. Sin embargo, en realidad, solo WebKit admite el desplazamiento en celdas. 'hidden' funciona bien, sin embargo. – bobince

-1

No estoy seguro si no se supone estar trabajando para celdas de la tabla, pero lo ideal es que realmente no quieren ocultar todos modos. Le sugiero que la separación silábica de palabras largas, que se puede hacer fácilmente con la siguiente lib (sólo tienen unas pocas líneas de JS para poner en práctica):

http://code.google.com/p/hyphenator/

Ejemplo:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

Fuente

2009-10-29 14:46:05

Estaba pensando en algo similar, pero desafortunadamente esa decisión de diseño no depende de mí. – canadiancreed

<html> 
<head> 
<style> 
td { width: 33%; height: 2em; } 
td div { width:100%;height:100%;overflow:hidden } 
</style> 

</head> 

<body> 

<table border="1" style="width:300px;"> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
</table> 

</body> 

</html>

Fuente

2009-10-29 14:55:34 bugtussle

De forma predeterminada, el mecanismo de diseño de tabla automática amplía el ancho de la tabla para ajustarse al ancho mínimo del contenido de la celda. Decir que no hacer eso con la propiedad table-layout:

<table width="100%" style="table-layout: fixed">

y su ejemplo funciona como se esperaba. Probablemente también deba eliminar el width: 100px de las celdas de la tabla, ya que eso no tiene sentido en combinación con una tabla de 100% de ancho. (Aunque con el diseño de la mesa fija no importa, ya que sólo la primera fila de células o <col> s tiene alguna relación con los anchos de columna.)

Nota overflow: scroll o auto no funciona para celdas de la tabla en la mayoría de los navegadores. (Lo hace en WebKit.)

Fuente

2009-10-29 15:07:51 bobince

"Diseño de tabla: fijo" no cambia nada. La altura aún se expande. Probado en Chrome, que es webkit – matteo

desbordamiento: oculto no funciona cuando se usan las tablas

Respuesta

Cuestiones relacionadas