html - tamaño - Configuración de la altura máxima para el contenido de la celda de la tabla
tamaño de una tabla html (7)
Finalmente encontramos una respuesta de tipo. Primero, el problema: la tabla siempre se dimensiona a sí misma en torno al contenido, en lugar de forzar el contenido para que encaje en la tabla. Eso limita tus opciones.
Lo logramos configurando el contenido div para mostrar: ninguno, dejando que el tamaño de la tabla en sí mismo, y luego en javascript establezca el alto y ancho del contenido div en el alto y ancho interno de la etiqueta td adjunta. Mostrar el contenido div. Repite el proceso cuando la ventana cambie de tamaño.
Tengo una tabla que siempre debe ocupar un cierto porcentaje de la altura de la pantalla. La mayoría de las filas son de altura fija, pero tengo una fila que debe estirarse para llenar el espacio disponible. En el caso de que el contenido de una celda en esa fila desborde la altura deseada, me gustaría que los contenidos se recorten usando el desbordamiento: oculto.
Desafortunadamente, las tablas y las filas no respetan la propiedad de altura máxima. (Esto está en la especificación W3C). Cuando hay demasiado texto en la celda, la mesa se vuelve más alta, en lugar de ajustarse al porcentaje especificado.
Puedo hacer que la celda de la tabla se comporte si especifico una altura fija en píxeles para ella, pero eso frustra el propósito de que se estire automáticamente para llenar el espacio disponible.
Intenté usar divs, pero no puedo encontrar la fórmula mágica. Si uso los divs con display: table,: table-row, y: table-cell los divs actúan como una tabla.
¿Alguna pista sobre cómo puedo simular una propiedad de altura máxima en una tabla?
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>
Lo he solucionado usando este plugin: http://dotdotdot.frebsite.nl/
establece automáticamente una altura máxima para el objetivo y agrega tres puntos
Lo que encontré !!!, en las tablas CSS td{height:60px;} funciona igual que CSS td{min-height:60px;}
Conozco esa situación cuando la altura de las celdas se ve mal. Esta solución de JavaScript no necesita desbordamiento oculto.
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 de 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'';
}
}
Otra forma de evitarlo puede no coincidir, pero seguramente es la más simple:
td {
display: table-caption;
}
Posiblemente no cruce el navegador, pero logré obtener esto: http://jsfiddle.net/QexkH/
básicamente requiere un encabezado y pie de página de altura fija. y absoluta posiciona la mesa.
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;
}
Solo coloque las etiquetas en un div dentro del TD y coloque la altura y el desbordamiento ... como a continuación.
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
Tuve el mismo problema con un diseño de tabla que estaba creando. Usé la solución de Joseph Marikle pero también funcionó para FireFox, y agregué un estilo de tabla de tabla para una buena medida. La solución de CSS puro, ya que el uso de Javascript para esto parece completamente innecesario y excesivo.
html
<div class=''wrapper''>
<div class=''table''>
<div class=''table-row''>
<div class=''table-cell''>
content here
</div>
<div class=''table-cell''>
<div class=''cell-wrap''>
lots of content here
</div>
</div>
<div class=''table-cell''>
content here
</div>
<div class=''table-cell''>
content here
</div>
</div>
</div>
</div>
css
.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}
Necesita una envoltura alrededor de la mesa si desea que la tabla respete un alto de porcentaje; de lo contrario, puede establecer una altura de píxel en el elemento de la tabla.