horizontal - table responsive html
Cabecera de la mesa congelada dentro de div desplazable (13)
Tengo tres divs. Encabezado, central y pie de página. Hay una tabla en div central (gridview) que casi siempre es más larga que div externo. Así que he hecho este div desplazable verticalmente. La pregunta es: ¿cómo puedo hacer que el encabezado de la tabla sea visible después de que div se desplaza hacia abajo? Podría haber hecho este encabezado con div o tabla por separado y hacerlo fijo, pero los anchos de las columnas en la tabla no son siempre los mismos, así que no sé cómo mantener el ancho de las columnas en el encabezado. ¿Cualquier pista?
La solución es realmente simple. Necesitas 3 DIVs: un contenedor general (en mi caso de clase "outer"), un contenedor de tabla (en mi caso de clase "inner") y un DIV en el que haces un clon de una tabla existente usando jQuery o javaScript ( en mi caso de clase "encabezado").
La solución usa CSS y algunas líneas de código jQuery, que clona HTML de "inner" en "header" y establece su ancho y alto. Admite ancho de columnas fijas y variables. Probado con IE8, Firefox 9, Safari y Google Chrome.
Aquí hay un código de muestra:
$(document).ready(function() {
$(''.header'').html( $(''.inner'').html() );
$(''.header'').css(''width'', $(''.inner table'').outerWidth() );
$(''.header'').css(''height'', $(''.inner table thead'').outerHeight() );
});
table {
width:100%;
}
th {
border-top:1px solid #999;
text-align:left;
}
td, th {
border-bottom:1px solid #999;
background-color:#EEE;
}
.outer {
position:relative;
width:500px;
}
.inner {
height:150px;
overflow:auto;
}
.header {
position:absolute;
top:0;
left:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
<div class="inner">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
</tbody>
</table>
</div>
<div class="header">
</div>
</div>
</body>
Sé que esta es una publicación un poco antigua, pero tengo una solución realmente simple para esto usando CSS y un pequeño script jQuery. Incluso permite al usuario activar y desactivar la función de bloqueo de encabezado.
Echale un vistazo:
http://www.bobthegeek.com/?p=12
Chelín
Debe colocar una tabla con los encabezados sobre su tabla de datos. Puede mantener el ancho de la columna con table-layout: fixed. JavaScript se puede usar para que coincida con el ancho de las columnas.
No he probado esto, pero tal vez podrías generar la tabla dos veces, una vez en el encabezado y una vez en el div desplazable. Luego, en el encabezado, haga que todas las filas, excepto la fila del encabezado, sean invisibles. Quizás con ''display: none'' o establezca su altura en cero.
Tendría que poner el encabezado fuera del div desplazable. Todo dentro del div se desplazará.
EDITAR
En cuanto al ancho si vas a un encabezado separado, puedo ver algunas soluciones:
- Suponiendo que se trata de contenido dinámico, genere anchuras "fijas" basadas en la longitud de la cadena. Obviamente especifique en términos de EM y deje algún margen de error.
- Use javascript
- Use columnas de ancho fijo.
Realmente no he probado el primero, y podría ser un poco complicado. Sin embargo, es algo que debes probar si estás desesperado por el efecto.
También debería mencionar que probablemente haya bibliotecas JavaScript con widgets de tabla que ya lo hacen. Mírelos para ver cómo lo hacen.
Aquí hay una buena solución (principalmente CSS) que utiliza columnas de ancho fijo: http://www.imaputz.com/cssStuff/bulletVersion.html
Y aquí hay un poco de código jQuery para arreglar el ancho de la celda cuando el contenido de la celda toma más ancho que el ancho fijo:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
type="text/javascript"></script>
<script>
$(function() {
$(''div.tableContainer'').each(function() { // for each table
var div = $(this);
var widths = [];
var changed = false;
$(''table>*>tr'', div).each(function(tr_i) {
$(this).children().each(function(i) {
var w = $(this).width();
if (w > widths[i]) {
widths[i] = w;
changed = true;
}
});
}).each(function(tr_i) {
if (changed)
$(this).children().each(function(i) {
var width = widths[i];
// add some width for scrollbar
if (tr_i == 0 && changed && i == widths.length-1) width += 16;
// insert a div to ensure width
$(this).append(''<div style="width:''+width+''px; height:0px"> </div>'');
});
});
div.width(div.children(''table'').width()).css(''overflow-x'', ''hidden'');
});
});
</script>
La salida está un poco apagada en IE cuando se usa una DTD no estricta. Modifique los anchos en CSS si no puede usar el modo estándar.
Tenga en cuenta que el código jQuery aumenta el ancho de la tabla al final y deshabilita la barra de desplazamiento horizontal. Puede o no querer eso.
Eche un vistazo a YUI Data Table si está buscando una implementación integral entre navegadores. Creo que esto se hace creando otra tabla con anchos de columna coincidentes.
Parece que hay trucos necesarios para fijar el ancho de las columnas. Si recuerdo correctamente, Firefox requiere etiquetas <col /> para estar presente.
En cualquier caso, hubo muchos trucos empleados en YUI DataTable (50k líneas). Te aconsejo que lo mires y decidas hasta dónde te gustaría ir solo con esto.
Esta solución funciona usando CSS en Firefox y los otros navegadores Gecko, y expresiones CSS en IE.
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html
El encabezado y el pie de página no permanecen fijos en Opera o Safari / Chrome, pero toda la tabla es desplazable, por lo que es utilizable. Tenga en cuenta que las columnas tienen anchos de porcentaje en el ejemplo del autor, pero se pueden eliminar.
Si quieres experimentar con el soporte de Opera / Safari / Chrome, mira dando a la pantalla de tbody: bloquea e ir desde allí.
Lo que realmente quiere hacer es hacer que el <tbody> de la tabla de datos sea desplazable, por lo que <thead> y <tfoot> permanecerán fijos de forma natural.
Mientras que esto es trivial para FF et al:
tbody
{
height: 100px; /* or whatever */
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}
IE tiene problemas graves y complejos con tbody en general. Se puede resolver con expresiones, pero no es trivial y específico para el diseño.
Puede probar el complemento jQuery Stupid Fixed Header . La técnica es básicamente la misma: clonar un encabezado y colocarlo encima de la capa de la tabla.
Acabo de armar un plugin jQuery que hace exactamente lo que quieres. Es muy pequeño en tamaño y muy fácil de implementar.
Todo lo que se requiere es una mesa que tenga un thead y tbody.
Puede envolver esa tabla en un DIV con un nombre de clase y la tabla siempre se redimensionará para caber en ese div. entonces, por ejemplo, si su div se escala con la ventana del navegador, también lo hará la tabla. El encabezado se arreglará cuando se desplaza. El pie de página será fijo (si habilita un pie de página). También tiene la opción de clonar el encabezado en el pie de página y arreglarlo. Además, si la ventana de su navegador es demasiado pequeña y todas las columnas no caben ... también se desplazará horizontalmente (encabezado también).
simplemente pasa el nombre de clase del DIV al complemento como lo hace: $ (''. myDiv''). fixedHeaderTable ({footer: true, footerId: ''myFooterId''}); y el complemento hará el resto. FooterID es un elemento en la página que contiene el marcado para su pie de página. esto se usa si quiere tener paginación como pie de página.
Si tiene varias tablas en la página, también funcionará para cada tabla que desee tener un encabezado fijo.
échale un vistazo aquí: http://fixedheadertable.mmalek.com/
Tenga en cuenta que sigue siendo ''beta'', así que estoy agregando nuevas funciones y correcciones de errores a diario.
Navegadores compatibles: IE6, IE7, IE8, Firefox, Safari y Chrome
Aquí hay una solución básica que usa javascript:
function position(table) {
table.rows[0].style.position="absolute";
table.rows[0].style.top="0px";
table.style.marginTop = table.rows[0].clientHeight/1.2;
var widths = Array();
for(var i = 0; i < table.rows[0].cells.length; i++) {
widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
}
for(var row = 0; row < table.rows.length; row++) {
for(var col = 0; col < widths.length; col ++) {
table.rows[row].cells[col].style.width = widths[col] + "px";
}
}
}
function max(num1, num2) { return (num1 > num2) ? num1 : num2; }
¿No es este tipo de lo mismo (es decir, duplicado) como ¿Cómo puedo bloquear la primera fila y la primera columna de una tabla cuando se desplaza, posiblemente utilizando javascript y CSS?