div - title html css
Establecer una altura máxima en una mesa (8)
Estoy tratando de diseñar una página donde hay algunas tablas. Parece que diseñar mesas es mucho más doloroso de lo que debería ser.
El problema es el siguiente. Las tablas deben tener una altura fija y mostrar un espacio en blanco en la parte inferior, cuando hay muy poco contenido, o una barra de desplazamiento vertical, cuando hay demasiado. Agregue a esto que las tablas tienen un encabezado que no debe desplazarse.
Hasta donde yo sé, el thead no desplazarse es el comportamiento predeterminado de las tablas. Y un tfoot estiramiento podría servir bien con el propósito de llenar con espacio en blanco. Lamentablemente, parece que todas las restricciones que puedo poner en la altura de la mesa se ignoran alegremente. Yo he tratado
table {
height: 600px;
overflow: scroll;
}
Lo he intentado con max-height . Intenté posicionar la mesa de manera absoluta y doy las coordenadas superior e inferior. Intenté editar manualmente la altura en Firebug para ver si era un problema con la especificidad de CSS. Intenté establecer la altura en el tbody también. El hecho es que la tabla siempre se mantiene exactamente alta como su contenido , independientemente de mis esfuerzos.
Por supuesto que podría falsificar una tabla con una estructura div, pero en realidad es una tabla, y me temo que al usar divs puedo encontrar un problema donde algunas columnas pueden no estar alineadas correctamente.
¿Cómo se supone que le doy una altura a una mesa?
Agregar display:block; a la tabla de css. (en otras palabras, dígale a la mesa que actúe como un elemento de bloque en lugar de una tabla).
En Tablas, para la altura mínima de las celdas de la tabla o la altura de las filas, use la height: css height: en lugar de min-height:
Y
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'';
}
}
Parece muy similar a this pregunta. A partir de ahí, parece que esto debería hacer el truco:
table {
display: block; /* important */
height: 600px;
overflow-y: scroll;
}
Puedes hacer esto usando el siguiente CSS.
.scroll-thead{
width: 100%;
display: inline-table;
}
.scroll-tbody-y
{
display: block;
overflow-y: scroll;
}
.table-body{
height: /*fix height here*/;
}
Lo siguiente es el HTML.
<table>
<thead class="scroll-thead">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody class="scroll-tbody-y table-body">
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</tbody>
</table>
Tuve un compañero de trabajo preguntando cómo hacer esto hoy, y esto es lo que se me ocurrió. No me gusta, pero es una forma de hacerlo sin js y tener encabezados respetados. El principal inconveniente, sin embargo, es que pierdes algo de semántica debido a que ya no tienes un verdadero encabezado de tabla.
Básicamente, envuelvo una mesa dentro de una mesa y uso un div como contenedor de desplazamiento al darle una max-height . Dado que envuelvo la tabla en una tabla principal "colspanning" de las filas del encabezado falso, aparece como si la tabla las respetara, pero en realidad la tabla secundaria solo tiene el mismo número de filas.
Un pequeño problema debido a que la barra de desplazamiento ocupa espacio, el ancho de la columna de la tabla secundaria no coincidirá exactamente.
Margen
<table class="table-container">
<tbody>
<tr>
<td>header col 1</td>
<td>header col 2</td>
</tr>
<tr>
<td colspan="2">
<div class="scroll-container">
<table>
<tr>
<td>entry1</td>
<td>entry1</td>
</tr>
........ all your entries
</table>
</div>
</td>
</tr>
</tbody>
</table>
CSS
.table-container {
border:1px solid #ccc;
border-radius: 3px;
width:50%;
}
.table-container table {
width: 100%;
}
.scroll-container{
max-height: 150px;
overflow-y: scroll;
}
Use divs con altura máxima y altura mínima alrededor del contenido que necesita desplazarse.
<tr>
<td>
<div>content</div>
</td>
</tr>
td div{
max-height:20px;
}
NOTA esta respuesta ahora es incorrecta . Puedo volver sobre eso en otro momento.
Como han señalado otros, no puede establecer la altura de una tabla a menos que configure su pantalla para block , pero luego obtiene un encabezado de desplazamiento. Entonces, lo que está buscando es configurar la height y display:block en el tbody solo:
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
Aquí está el violín .
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody id="tbodyMain" style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
Sección de Javascript
<script>
$(document).ready(function(){
var maxHeight = Math.max.apply(null, $("body").map(function () { return $(this).height(); }).get());
// alert(maxHeight);
var borderheight =3 ;
// Added some pixed into maxheight
// If you set border then need to add this "borderheight" to maxheight varialbe
$("#tbodyMain").css("min-height", parseInt(maxHeight + borderheight) + "px");
});
</script>
por favor, consulte Cómo establecer la altura máxima posible para su Table Body
Violín aquí