horizontal - tablas en html5
Tabla HTML con 100% de ancho, con desplazamiento vertical dentro del cuerpo (10)
Solución de CSS para forzar que las columnas se muestren correctamente con un ''bloque'' tbody
Esta solución aún requiere que los anchos th sean calculados y configurados por jQuery
table.scroll tbody,
table.scroll thead { display: block; }
table.scroll tbody {
overflow-y: auto;
overflow-x: hidden;
max-height: 300px;
}
table.scroll tr {
display: flex;
}
table.scroll tr > td {
flex-grow: 1;
flex-basis: 0;
}
Y el JQuery / Javascript.
var $table = $(''#the_table_element''),
$bodyCells = $table.find(''tbody tr:first'').children(),
colWidth;
$table.addClass(''scroll'');
// Adjust the width of thead cells when window resizes
$(window).resize(function () {
// Get the tbody columns width array
colWidth = $bodyCells.map(function () {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find(''thead tr'').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
¿Cómo puedo configurar para <table> 100% de ancho y colocar solo el desplazamiento vertical de <tbody> para cierta altura?
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
Quiero evitar agregar algunos div adicionales, todo lo que quiero es una tabla simple como esta y cuando intento cambiar, table-layout , la position y muchas más cosas en la tabla CSS no funcionan bien con un 100% de ancho solo con un ancho fijo en px .
Agregando un ancho fijo a td, th después de que el bloque de visualización de tbody y thead funcione perfectamente y también podemos usar el plugin slimscroll para hacer que la barra de desplazamiento sea hermosa.
<!DOCTYPE html>
<html>
<head>
<title> Scrollable table </title>
<style>
body {
font-family: sans-serif;
font-size: 0.9em;
}
table {
border-collapse: collapse;
border-bottom: 1px solid #ddd;
}
thead {
background-color: #333;
color: #fff;
}
thead,tbody {
display: block;
}
th,td {
padding: 8px 10px;
border: 1px solid #ddd;
width: 117px;
box-sizing: border-box;
}
tbody {
height: 160px;
overflow-y: scroll
}
</style>
</head>
<body>
<table class="example-table">
<thead>
<tr>
<th> Header 1 </th>
<th> Header 2 </th>
<th> Header 3 </th>
<th> Header 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Row 1- Col 1 </td>
<td> Row 1- Col 2 </td>
<td> Row 1- Col 3 </td>
<td> Row 1- Col 4 </td>
</tr>
<tr>
<td> Row 2- Col 1 </td>
<td> Row 2- Col 2 </td>
<td> Row 2- Col 3 </td>
<td> Row 2- Col 4 </td>
</tr>
<tr>
<td> Row 3- Col 1 </td>
<td> Row 3- Col 2 </td>
<td> Row 3- Col 3 </td>
<td> Row 3- Col 4 </td>
</tr>
<tr>
<td> Row 4- Col 1 </td>
<td> Row 4- Col 2 </td>
<td> Row 4- Col 3 </td>
<td> Row 4- Col 4 </td>
</tr>
<tr>
<td> Row 5- Col 1 </td>
<td> Row 5- Col 2 </td>
<td> Row 5- Col 3 </td>
<td> Row 5- Col 4 </td>
</tr>
<tr>
<td> Row 6- Col 1 </td>
<td> Row 6- Col 2 </td>
<td> Row 6- Col 3 </td>
<td> Row 6- Col 4 </td>
</tr>
<tr>
<td> Row 7- Col 1 </td>
<td> Row 7- Col 2 </td>
<td> Row 7- Col 3 </td>
<td> Row 7- Col 4 </td>
</tr>
<tr>
<td> Row 8- Col 1 </td>
<td> Row 8- Col 2 </td>
<td> Row 8- Col 3 </td>
<td> Row 8- Col 4 </td>
</tr>
<tr>
<td> Row 9- Col 1 </td>
<td> Row 9- Col 2 </td>
<td> Row 9- Col 3 </td>
<td> Row 9- Col 4 </td>
</tr>
<tr>
<td> Row 10- Col 1 </td>
<td> Row 10- Col 2 </td>
<td> Row 10- Col 3 </td>
<td> Row 10- Col 4 </td>
</tr>
<tr>
<td> Row 11- Col 1 </td>
<td> Row 11- Col 2 </td>
<td> Row 11- Col 3 </td>
<td> Row 11- Col 4 </td>
</tr>
<tr>
<td> Row 12- Col 1 </td>
<td> Row 12- Col 2 </td>
<td> Row 12- Col 3 </td>
<td> Row 12- Col 4 </td>
</tr>
<tr>
<td> Row 13- Col 1 </td>
<td> Row 13- Col 2 </td>
<td> Row 13- Col 3 </td>
<td> Row 13- Col 4 </td>
</tr>
<tr>
<td> Row 14- Col 1 </td>
<td> Row 14- Col 2 </td>
<td> Row 14- Col 3 </td>
<td> Row 14- Col 4 </td>
</tr>
<tr>
<td> Row 15- Col 1 </td>
<td> Row 15- Col 2 </td>
<td> Row 15- Col 3 </td>
<td> Row 15- Col 4 </td>
</tr>
<tr>
<td> Row 16- Col 1 </td>
<td> Row 16- Col 2 </td>
<td> Row 16- Col 3 </td>
<td> Row 16- Col 4 </td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script>
$(''.example-table tbody'').slimscroll({
height: ''160px'',
alwaysVisible: true,
color: ''#333''
})
</script>
</body>
</html>
Cree dos tablas una tras otra, ponga la segunda tabla en un div de altura fija y establezca la propiedad de desbordamiento en auto. También mantenga vacíos todos los td dentro de la segunda tabla.
<div>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
</table>
</div>
<div style="max-height:500px;overflow:auto;">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</div>
En la siguiente solución, la tabla ocupa el 100% del contenedor principal, no se requieren tamaños absolutos. Es puro CSS, se utiliza el diseño flexible.
Aquí está cómo se ve:
Posibles desventajas:
- la barra de desplazamiento vertical siempre está visible, independientemente de si se requiere;
- el diseño de la tabla es fijo: las columnas no cambian de tamaño según el ancho del contenido (aún puede establecer el ancho de columna que desee explícitamente);
- hay un tamaño absoluto: el ancho de la barra de desplazamiento, que es de aproximadamente 0.9em para los navegadores que pude verificar.
HTML (acortado):
<div class="table-container">
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
...
</tbody>
</table>
</div>
CSS, con algunas decoraciones omitidas para mayor claridad:
.table-container {
height: 10em;
}
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
table thead {
/* head takes the height it requires,
and it''s not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead, table tbody tr {
display: table;
table-layout: fixed;
}
Mismo código en MENOS para que puedas mezclarlo en:
.table-scrollable() {
@scrollbar-width: 0.9em;
display: flex;
flex-flow: column;
thead,
tbody tr {
display: table;
table-layout: fixed;
}
thead {
flex: 0 0 auto;
width: ~"calc(100% - @{scrollbar-width})";
}
tbody {
display: block;
flex: 1 1 auto;
overflow-y: scroll;
tr {
width: 100%;
}
}
}
En los navegadores modernos, simplemente puede usar css:
th {
position: sticky;
top: 0;
z-index: 2;
}
Este es el código que me funciona para crear un thead pegajoso en una mesa con un cuerpo desplazable:
table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:50px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}
Estoy usando display:block for thead y tbody . Debido a esto, el ancho de las columnas thead es diferente del ancho de las columnas tbody .
table {margin:0 auto; border-collapse:collapse;} thead {background:#CCCCCC;display:block} tbody {height:10em;overflow-y:scroll;display:block}
Para solucionar esto, uso un pequeño código jQuery , pero solo se puede hacer en JavaScript .
var colNumber=3 //number of table columns
for (var i=0; i<colNumber; i++)
{
var thWidth=$("#myTable").find("th:eq("+i+")").width();
var tdWidth=$("#myTable").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#myTable").find("th:eq("+i+")").width(tdWidth);
else
$("#myTable").find("td:eq("+i+")").width(thWidth);
}
Aquí está mi demostración de trabajo: http://jsfiddle.net/gavroche/N7LEF/
No funciona en IE 8
var colNumber=3 //number of table columns
for (var i=0; i<colNumber; i++)
{
var thWidth=$("#myTable").find("th:eq("+i+")").width();
var tdWidth=$("#myTable").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#myTable").find("th:eq("+i+")").width(tdWidth);
else
$("#myTable").find("td:eq("+i+")").width(thWidth);
}
table {margin:0 auto; border-collapse:separate;}
thead {background:#CCCCCC;display:block}
tbody {height:10em;overflow-y:scroll;display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" border="1">
<thead>
<tr>
<th>A really Very Long Header Text</th>
<th>Normal Header</th>
<th>Short</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
</tbody>
</table>
Finalmente lo entendí bien con CSS puro siguiendo estas instrucciones:
http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/
El primer paso es configurar <tbody> para mostrar: bloque para que se pueda aplicar un desbordamiento y una altura. Desde allí, las filas en el <thead> deben establecerse en posición: relativo y mostrar: bloquear para que se sienten sobre el <tbody> ahora desplazable.
tbody, thead { display: block; overflow-y: auto; }
Debido a que <thead> está relativamente posicionado, cada celda de la tabla necesita un ancho explícito
td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
Pero desafortunadamente eso no es suficiente. Cuando una barra de desplazamiento está presente, los navegadores le asignan espacio, por lo tanto, <tbody> termina teniendo menos espacio disponible que <thead> . Note la ligera desalineación que esto crea ...
La única solución que se me ocurrió fue establecer un ancho mínimo en todas las columnas, excepto la última.
td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
Todo ejemplo de codepen a continuación:
CSS:
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333333;
color: #fdfdfd;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #dddddd;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
HTML:
<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
EDITAR: Solución alternativa para el ancho de la mesa al 100% (el anterior en realidad es para el ancho fijo y no respondió la pregunta):
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
CSS:
table {
width: 100%;
text-align: left;
min-width: 610px;
}
tr {
height: 30px;
padding-top: 10px
}
tbody {
height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
width: 20%;
float: left;
}
td:nth-child(3),
th:nth-child(3) {
width: 59%;
float: left;
}
/* some colors */
thead {
background-color: #333333;
color: #fdfdfd;
}
table tbody tr:nth-child(even) {
background-color: #dddddd;
}
Demostración: http://codepen.io/anon/pen/bNJeLO
Para hacer que el elemento <tbody> desplazable, necesitamos cambiar la forma en que se muestra en la página, es decir, usar display: block; para mostrar eso como un elemento de nivel de bloque.
Dado que cambiamos la propiedad de display de tbody , deberíamos cambiar esa propiedad para el elemento thead también para evitar que se rompa el diseño de la tabla.
Entonces tenemos:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Los navegadores web muestran los elementos thead y tbody como grupo de filas ( table-header-group y table-row-group ) de forma predeterminada.
Una vez que cambiamos eso, los elementos tr no llenan todo el espacio de su contenedor.
Para solucionarlo, tenemos que calcular el ancho de las columnas tbody y aplicar el valor correspondiente a las columnas thead través de JavaScript.
Columnas de ancho automático
Aquí está la versión jQuery de la lógica anterior:
// Change the selector if needed
var $table = $(''table''),
$bodyCells = $table.find(''tbody tr:first'').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find(''thead tr'').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
Y aquí está la salida (en Windows 7 Chrome 32) :
Tabla de ancho completo, columnas de ancho relativo
Como el póster original era necesario, podríamos expandir la table al 100% del width de su contenedor y luego usar un width relativo ( Porcentaje ) para cada columna de la tabla.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Debido a que la tabla tiene una (más o menos) disposición fluida , debemos ajustar el ancho de thead columnas cuando el contenedor thead tamaño.
Por lo tanto, deberíamos establecer el ancho de las columnas una vez que la ventana cambie de tamaño:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
La salida sería:
Soporte del navegador y alternativas
He probado los dos métodos anteriores en Windows 7 a través de las nuevas versiones de los principales navegadores web (incluido IE10 +) y funcionó.
Sin embargo, doesn''t work properly en IE9 y por debajo.
Esto se debe a que en un diseño de tabla , todos los elementos deben seguir las mismas propiedades estructurales.
Utilizando display: block; para los elementos <thead> y <tbody> , hemos roto la estructura de la tabla.
Rediseño de diseño a través de JavaScript
Un enfoque es rediseñar el diseño de la tabla (completa). Uso de JavaScript para crear un nuevo diseño sobre la marcha y manejar y / o ajustar dinámicamente los anchos / alturas de las celdas.
Por ejemplo, eche un vistazo a los siguientes ejemplos:
- jQuery .floatThead() plugin (un complemento de encabezado de tabla flotante / bloqueado / .floatThead() )
- Complemento jQuery Mesa de desplazamiento . ( código fuente en github)
- jQuery .FixedHeaderTable() plugin ( código fuente en github)
- Ejemplo de desplazamiento vertical de DataTables.
Mesas nido
Este enfoque utiliza dos tablas anidadas con un div que contiene. La primera table tiene solo una celda que tiene un div , y la segunda tabla se coloca dentro de ese elemento div .
Verifique las tablas de desplazamiento vertical en CSS Play .
Esto funciona en la mayoría de los navegadores web. También podemos hacer la lógica anterior dinámicamente a través de JavaScript.
Mesa con cabecera fija en scroll.
Dado que el propósito de agregar una barra de desplazamiento vertical al <tbody> es mostrar el encabezado de la tabla en la parte superior de cada fila, podríamos colocar el elemento thead para que permanezca fixed en la parte superior de la pantalla.
Aquí hay una demostración de trabajo de este enfoque realizado por Julien .
Tiene un soporte de navegador web prometedor.
Y here una implementación CSS pura por Willem Van Bockstal .
La solución de CSS pura
Aquí está la vieja respuesta. Por supuesto, he agregado un nuevo método y refinado las declaraciones de CSS.
Mesa con Ancho Fijo
En este caso, la table debe tener un width fijo (incluida la suma de los anchos de las columnas y el ancho de la barra de desplazamiento vertical) .
Cada columna debe tener un ancho específico y la última columna del elemento thead necesita un ancho mayor que sea igual al ancho de los demás + el ancho de la barra de desplazamiento vertical.
Por lo tanto, el CSS sería:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
Aquí está la salida:
Mesa con 100% de ancho.
En este enfoque, la table tiene un ancho de 100% y para cada th y td , el valor de la propiedad de width debe ser inferior al 100% / number of cols .
Además, debemos reducir el ancho de thead como valor del ancho de la barra de desplazamiento vertical.
Para hacer eso, necesitamos usar la función calc() CSS3, de la siguiente manera:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: '' '';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
Aquí está la demostración en línea .
Nota: este enfoque fallará si el contenido de cada columna rompe la línea, es decir, el contenido de cada celda debe ser lo suficientemente corto .
A continuación, hay dos ejemplos simples de solución CSS pura que creé en el momento en que respondí esta pregunta.
Aquí está el jsFiddle Demo v2 .
Versión anterior: jsFiddle Demo v1
Prueba el siguiente enfoque, muy simple, fácil de implementar.
A continuación se muestra el enlace jsfiddle
http://jsfiddle.net/v2t2k8ke/2/
HTML:
<table border=''1'' id=''tbl_cnt''>
<thead><tr></tr></thead><tbody></tbody>
CSS:
#tbl_cnt{
border-collapse: collapse; width: 100%;word-break:break-all;
}
#tbl_cnt thead, #tbl_cnt tbody{
display: block;
}
#tbl_cnt thead tr{
background-color: #8C8787; text-align: center;width:100%;display:block;
}
#tbl_cnt tbody {
height: 100px;overflow-y: auto;overflow-x: hidden;
}
Jquery:
var data = [
{
"status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
},{ "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
},{
"status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
},{
"status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
}
];
var sth = '''';
$.each(data[0], function (key, value) {
sth += ''<td>'' + key + ''</td>'';
});
var stb = '''';
$.each(data, function (key, value) {
stb += ''<tr>'';
$.each(value, function (key, value) {
stb += ''<td>'' + value + ''</td>'';
});
stb += ''</tr>'';
});
$(''#tbl_cnt thead tr'').append(sth);
$(''#tbl_cnt tbody'').append(stb);
setTimeout(function () {
var col_cnt=0
$.each(data[0], function (key, value) {col_cnt++;});
$(''#tbl_cnt thead tr'').css(''width'', ($("#tbl_cnt tbody") [0].scrollWidth)+ ''px'');
$(''#tbl_cnt thead tr td,#tbl_cnt tbody tr td'').css(''width'', ($(''#tbl_cnt thead tr '').width()/Number(col_cnt)) + ''px'');}, 100)