html - tablas - ¿Cómo establecer la altura máxima para table-cell?

tabla html5 responsive ejemplos (9)

¿Podría esto ajustarse a tus necesidades?

Obtuve una celda de tabla con ancho y alto fijos, y si el texto es demasiado grande, el tamaño de la celda debe permanecer igual y el texto debe ocultarse por desbordamiento: oculto.

div { display: table-cell height: 100px; width: 100px; overflow: hidden; vertical-align: middle; }

Table-cell, sin embargo, se expande más allá de 100px si se agrega demasiado texto. ¿Algún truco para evitar que se expanda?

El texto debe tener varias líneas de longitud, por lo que la solución "white-space: nowrap" no es aplicable

En CSS no se puede establecer la altura máxima de las celdas de la tabla, y si se borra el espacio en blanco, entonces no se puede romper con el ancho máximo, por lo que la solución es javascript funcionando en todos los navegadores.

Entonces, esto puede funcionar para ti.

Para limitar la altura máxima de todas las celdas o filas en la tabla con Javascript:

Este script es bueno para tablas de desbordamiento horizontales.

Esta secuencia de comandos aumenta el ancho de la tabla 300px cada vez, máximo 4000px hasta que las filas se reducen a la altura máxima (160px), y también puede editar los números según su necesidad.

var i = 0, row, table = document.getElementsByTagName(''table'')[0], j = table.offsetWidth; while (row = table.rows[i++]) { while (row.offsetHeight > 160 && j < 4000) { j += 300; table.style.width = j + ''px''; } }

Fuente: HTML Table Solution Límite máximo de altura para filas o celdas al aumentar el ancho de la tabla, Javascript

Esto es lo que quieres:

td { max-height: whatever; max-width: whatever; overflow: hidden; }

No creo que la respuesta aceptada realmente resuelva el problema por completo. Quería tener un vertical-align: middle en el contenido de las celdas de la tabla. Pero cuando agrega un div dentro de la celda de tabla y le da una altura, el contenido de ese DIV interno estará en la parte superior. Comprueba este jsfiddle . El desbordamiento: oculto; funciona bien, pero si acorta el contenido para que sea solo una línea, esta línea no se centrará verticalmente

La solución no es agregar un DIV dentro de la celda de la tabla, sino más bien afuera. Aquí está el Código :

/* some wrapper */ div.d0 { background: grey; width:200px; height: 200px; } div.table { margin: 0 auto; /* just cosmetics */ width: 150px; height: 150px; background: #eee; display: table; } div.tablecell { display: table-cell; vertical-align: middle; text-align:center; height: 100%; width: 100%; background: #aaa; } div.outer-div { height: 150px; overflow: hidden; }

<div class="d0"> <div class="outer-div"> <div class="table"> <div class="tablecell"> Lorem ipsum  </div> </div> </div> </div>

Pruebe algo como esto: -

table { width: 50%; height: 50%; border-spacing: 0; position:absolute; } td { border: 1px solid black; } #content { position:absolute; width:100%; left:0px; top:20px; bottom:20px; overflow: hidden; }

Puede hacer cualquiera de los siguientes:

Utilice el atributo css "line-height" y configúrelo por fila de tabla (), esto también centrará verticalmente el contenido dentro de
Establezca el atributo "display" css en "block" y de la siguiente manera:

td { display: block; overflow-y: hidden; max-height: 20px; }

¡buena suerte!

Según las reglas de CSS 2.1 , la altura de una celda de la tabla es "la altura mínima requerida por el contenido". Por lo tanto, debe restringir la altura indirectamente mediante el marcado interno, normalmente un elemento div ( <td><div>content</div></td> ) y establecer las propiedades de height y overflow en el elemento div (sin configurar la display: table-cell en él, por supuesto, ya que eso haría que su altura obedezca las reglas de celda de la tabla CSS 2.1).

Tratar

<td style="word-wrap: break-word">Long text here</td>

Use el estilo a continuación:

div { display: fixed; max-height: 100px; max-width: 100px; overflow: hidden; }

Con el HTML siendo:

<div> your long text here </div>