style - link css to html
How To: 100% Height Table only Scroll tbody (9)
Espero que no sea demasiado tarde y que todavía estés vivo, las cosas han mejorado mucho desde entonces :)
Puedes usar:
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: calc(100vh - 55px);
}
Tabla desplazable (tbody) con 100% de altura y encabezado fijo en JSFiddle: http://jsfiddle.net/gengns/p3fzdc5f/
¿Es posible desplazar el contenido de una tabla con una altura del 100% y no el encabezado con CSS y solo mostrar la barra de desplazamiento al lado del contenido del cuerpo y no la fila del encabezado? ¡Gracias!
Las mesas son un negocio complicado. Supongo que quieres usarlos para fines semánticos y de respaldo, pero son un tanto flexibles.
Por suerte, algunos ya descubrieron no uno, sino dos buenos métodos para lograr efectos desplazables ... en ~ 2005.
http://www.cssplay.co.uk/menu/tablescroll.html
Todavía necesitan un código html adicional para que sea posible y la segunda tabla utiliza efectivamente una tabla anidada, pero el HTML de reserva / normal parece una tabla normal.
Método 1
Div exterior con relleno, para crear un "campo" para los elementos. Div interior que hace que la mesa interior desplazable. La fila de la tabla de thead está absolutamente posicionada para que permanezca en la parte superior del cuerpo, lo mismo se hace con el pie de página. Debido a que el div interno está overflow: auto y una altura definida, el resto de las filas de la tabla caen en línea en el área desplazable.
Método # 2
La tabla externa es una tabla normal, el encabezado y el pie de página se diseñan normalmente. Pero el cuerpo de la tabla externa contiene solo una fila, una columna y en ella tiene otra tabla. Esta columna tiene una altura definida y un overflow: auto por lo que la capacidad (que solo tiene el contenido) se desplazará dentro de ella.
Mat que es simple. Esto es lo que quieres hacer.
CSS:
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
html, body{ width: 100%; height: 100%;}
table{
width: 100%;
height: 100%;
background-color: #aaa;
}
tbody{
width: 100%;
height: 100%;
-display: block;
background-color: #ccc;
overflow-y: scroll;
overflow-x: hidden;
}
td{
width: 100px;
height: 200px;
background-color: #eee;
}
</style>
HTML:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Por lo que sé, no es posible con CSS puro (al menos no con navegador cruzado), pero usar el complemento jQuery es posible y muy simple, por ejemplo, jQuery.FixedTable .
Puedes hacerlo con flex display. No hay necesidad de tamaños codificados duros.
Here es un ejemplo de cómo hacer un encabezado fijo y un contenido desplazable en una tabla. Código:
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Fixed Header in table</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="height: 100%">
<table style="display: flex; height: 100%; flex-direction: column">
<thead>
<tr>
<td>HEADER<br/>------------</td>
</tr>
</thead>
<tbody style="flex: 1; overflow: auto">
<tr>
<td>
<div>
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Para una implementación completa del Santo Grial (encabezado, pie de página, navegación, lado y contenido), usando la pantalla flexible, vaya a here .
Si es posible en su escenario, una alternativa directa y sencilla sería colocar el encabezado en un div separado y la tabla dentro de otro div con altura apta y aplicar las siguientes propiedades al div.
overflow-x: hidden;
overflow-y: scroll;
Tuve un problema similar al obtener solo el contenido debajo del encabezado para ambos desplazarse y permanecer en el 100% de la altura restante. Aquí estaba mi solución:
http://jsfiddle.net/ajkochanowicz/YDjsE/
Esto funcionará para casos de uso más simples.
#container {
border: 1px solid red;
width: 200px;
height: 250px; /* This can be any height and everything fills in */
padding-top: 55px;
}
#something-else {
height: 55px;
width: 200px;
background-color: green;
margin-top:-55px;
}
#overflow {
border: 1px solid blue;
width:198px;
overflow-y: auto;
height: 100%;
}
Una solución javascript es usar ''encabezados flotantes''. Pones toda la tabla en un div con conjunto de desbordamiento, luego el JavaScript clonará el encabezado de la tabla y lo colocará en la parte superior del div, un poco como una interfaz de Apple.
Un ejemplo de jQuery es http://fixedheadertable.com/
Tenga en cuenta que esto se vuelve muy complejo si está haciendo otras cosas en la tabla, como la clasificación del lado del cliente, el filtrado, etc.
prueba este archivo CSS:
table{
width: 100%;
height: 400px;
background-color: #aaa;
}
tbody{
background-color: #CCCCCC;
display: block;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
td{
width: 100px;
height: 30px;
background-color: #eee;
}
thead {
display: block;
height: 30px;
width: 100%;
}
funciona en mi firefox ... no probado en ningún otro lugar ... :)