html - para - webkit firefox
Hacer que TBODY sea desplazable en los navegadores Webkit (14)
Soy consciente de esta pregunta , pero ninguna de las respuestas funciona en Safari, Chrome, etc.
La estrategia aceptada ( como se demuestra aquí ) es establecer las propiedades de desbordamiento y altura tbody de la siguiente manera:
<table>
<thead>
<tr><th>This is the header and doesn''t scroll</th></tr>
</thead>
<tbody style="height:100px; overflow:auto;">
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
</tbody>
</table>
Lamentablemente, esto no funciona en ningún navegador webkit. Hay un informe de error al respecto que no parece ser una alta prioridad (reportado el 05 de junio).
Entonces mi pregunta es: ¿hay estrategias alternativas que realmente funcionen? He intentado el enfoque de dos tablas, pero es imposible garantizar que el encabezado se alinee con el contenido. ¿Tengo que esperar a que Webkit lo arregle?
A hace frente al mismo problema hace mucho tiempo, y finalmente establecí el enfoque de dos tablas. Este es el resultado: http://jsfiddle.net/bGr4V/3/ , funciona para todos los navegadores (IE6 + incl).
En este jsFiddle puedes jugar con una versión limpia.
Mi solución fue agregar una celda de arreglos <th class="fix"> </th> en thead para llenar el espacio de la barra de desplazamiento en el tbody , luego darle a una columna un ancho variable ( <td class="grow"> ), por lo que la celda de arreglo del encabezado no coincidiría con el cambio de tamaño.
HTML:
<div class="fixed_table">
<div class="head">
<table>
<thead>
<tr>
<th>Column header</th>
<th class="grow">Column header</th>
<th class="fix"> </th>
</tr>
</thead>
</table>
<div class="body">
<table class="full_table">
<caption class="caption">Caption</caption>
<tbody>
<tr>
<td>Data</td>
<td class="grow">Data</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS: tiene * y _ hack para ie6-7, y un -webkit específico para el ancho de desplazamiento correspondiente a la celda fija del encabezado en cada caso.
.fixed_table table {
table-layout: fixed;
width: auto;
border-width: 0;
padding: 0;
border-collapse: collapse;
}
.fixed_table .body {
overflow: scroll;
overflow-x: hidden;
max-height: 10.75em;
min-height: 2.5em;
padding-bottom: 0.8em;
*padding-right: 17px; /*ie7 & ie6*/
_padding-right: 0; /*ie6*/
_height: 10em ;
}
.fixed_table th, .fixed_table td {
width: 4.7em;
}
.fixed_table .grow {
width: auto;
}
.fixed_table .fix {
width: 16px;
*width: 17px; /*ie7 & ie6*/
_width: 16px; /*ie6*/
}
/* webkit specific */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.fixed_table .fix{ width: 17px }
}
Agregar display:block; Esto también eliminará el desplazamiento horizontal innecesario en Firefox también. También es, sin duda, consciente de que ninguno de los dos ejemplos funciona en MSIE 8.
<table>
<thead>
<tr><th>This is the header and doesn''t scroll</th></tr>
</thead>
<tbody style="height:100px; overflow:auto;display:block;">
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
</tbody>
</table>
Aquí hay un ejemplo de trabajo:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Tienes que agregar la pantalla: bloquear a thead> tr y tbody
Aquí hay un ejemplo que funciona en IE5 +, Firefox y Chrome. Sin embargo, usa columnas de ancho fijo. http://www.cssplay.co.uk/menu/tablescroll.html
Deje que la mesa dibuje a su manera y calcule el ancho de cada columna y configúrelo para cada encabezado. Los encabezados están hechos con divisiones y luego podemos dejar que la tabla se desplace libremente.
<!DOCTYPE html>
<html>
<head>
<style>
.t_heading{
margin-top: 20px;
font-family: Verdana, Geneva, sans-serif;
background-color: #4CAF50;
}
.heading{
background-color: #4CAF50;
color: white;
float:left;
padding: 8px 0PX 8PX 0PX;
border-bottom: 1px solid #ddd;
height: 20px;
text-align: left;
}
.t_data{
overflow-y: scroll;
overflow-x: hidden;
height:0px;
width: 100%;
}
.t_content{
border-collapse: collapse;
font-family: Verdana, Geneva, sans-serif;
width: 100%;
}
.column1,.column2,.column3,.column4{
padding: 8px 0PX 8PX 0PX;
text-align: left;
border-bottom: 1px solid #ddd;
}
.t_row:hover{
background-color:#f5f5f5;
}
</style>
<script>
function setBody(){
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
height = height-300;
/*
** By changing the subtraction value, You can fit the table in to the screen correctly.
** Make sure not to come the hscroll.
** Or you can set fixed height with css for the div as your wish.
*/
document.getElementById("t_data").style.height = height+"px";
setColumnWidth("column1");
setColumnWidth("column2");
setColumnWidth("column3");
setColumnWidth("column4");
}
function setColumnWidth(o){
var object = o;
var x = document.getElementsByClassName(object);
var y = x[0].clientWidth;
document.getElementById(object).style.width = y+"px";
}
</script>
</head>
<body onload="setBody()">
<div class="t_heading">
<div class="heading" id="column1">Heading 1</div>
<div class="heading" id="column2">Heading 2</div>
<div class="heading" id="column3">Heading 3</div>
<div class="heading" id="column4">Heading 4</div>
</div>
<div class="t_data" id="t_data">
<table class="t_content">
<tr class=''t_row''>
<td class=''column1''>Column1 Row 0</td>
<td class=''column2''>Column2 Row 0</td>
<td class=''column3''>Column3 Row 0</td>
<td class=''column4''>Column4 Row 0</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 1</td>
<td class=''column2''>Column2 Row 1</td>
<td class=''column3''>Column3 Row 1</td>
<td class=''column4''>Column4 Row 1</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 2</td>
<td class=''column2''>Column2 Row 2</td>
<td class=''column3''>Column3 Row 2</td>
<td class=''column4''>Column4 Row 2</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 3</td>
<td class=''column2''>Column2 Row 3</td>
<td class=''column3''>Column3 Row 3</td>
<td class=''column4''>Column4 Row 3</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 4</td>
<td class=''column2''>Column2 Row 4</td>
<td class=''column3''>Column3 Row 4</td>
<td class=''column4''>Column4 Row 4</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 5</td>
<td class=''column2''>Column2 Row 5</td>
<td class=''column3''>Column3 Row 5</td>
<td class=''column4''>Column4 Row 5</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 6</td>
<td class=''column2''>Column2 Row 6</td>
<td class=''column3''>Column3 Row 6</td>
<td class=''column4''>Column4 Row 6</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 7</td>
<td class=''column2''>Column2 Row 7</td>
<td class=''column3''>Column3 Row 7</td>
<td class=''column4''>Column4 Row 7</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 8</td>
<td class=''column2''>Column2 Row 8</td>
<td class=''column3''>Column3 Row 8</td>
<td class=''column4''>Column4 Row 8</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 9</td>
<td class=''column2''>Column2 Row 9</td>
<td class=''column3''>Column3 Row 9</td>
<td class=''column4''>Column4 Row 9</td>
</tr><tr class=''t_row''>
<td class=''column1''>Column1 Row 10</td>
<td class=''column2''>Column2 Row 10</td>
<td class=''column3''>Column3 Row 10</td>
<td class=''column4''>Column4 Row 10</td>
</tr>
<!--
<?php
$data = array();
for($a = 0; $a<50; $a++)
{
$data[$a] = array();
$data[$a][0] = "Column1 Row ".$a;
$data[$a][1] = "Column2 Row ".$a;
$data[$a][2] = "Column3 Row ".$a;
$data[$a][3] = "Column4 Row ".$a;
}
/*
** supose you have data in an array.. which red from database. The table will draw using array data. Or you can draw the table manualy.
** tip: If using manual table, No need of
** ''var x = document.getElementsByClassName(object); var y = x[0].clientWidth;''.
** You can just set ID of first row''s cells in to some name and use it to read width.
*/
for($i=0;$i<sizeof($data);$i++){
echo "<tr class=''t_row''><td class=''column1''>".$data[$i][0]."</td><td class=''column2''>".$data[$i][1]."</td><td class=''column3''>".$data[$i][2]."</td><td class=''column4''>".$data[$i][3]."</td></tr>";
}
?>
-->
</table>
</div>
</body>
</html>
Desarrollé una solución de javascript para el problema anterior
que funciona solo en Firefox 7+ ya que solo he probado en FF
Llegué a este hilo y encontré la solución apuntada por Michael Koper
En esta solución, se hacen tres cosas importantes
1) arregla el ancho de la columna
2) la pantalla thead> tr está configurada para bloquear
3) la pantalla tbody está configurada para bloquear
como otros mencionaron su problema para arreglar el ancho, yo también estoy en la misma posición;
incluso no puedo arreglar el ancho estáticamente
así que pensé que iba a arreglar el ancho de forma dinámica (después de que la tabla se represente en el navegador) y esto funcionó :)
siguiente es la solución en javascript que funciona solo en FF
(He probado solo en FF, no tengo acceso a otros navegadores)
function test1(){
var tbodys = document.getElementsByTagName("TBODY");
for(var i=0;i<tbodys.length;i++){
do_tbodyscroll(tbodys[i]);
}
}
function do_tbodyscroll(_tbody){
// get the table node
var table = _tbody.parentNode;
// first row of tbody
var _fr = _tbody.getElementsByTagName("TR")[0];
// first row cells ..
var _frcells = _fr.cells;
// Width array , width of each element is stored in this array
var widtharray = new Array(_frcells.length);
for(var i=0;i<_frcells.length;i++){
widtharray[i] = _frcells[i].scrollWidth;
}
// Apply width to first row
for(var i=0;i<_frcells.length;i++){
_frcells[i].width = widtharray[i];
}
// Get the Last row in Thead ...
// COLGROUPS USING COLSPAN NOT YET SUPPORTED
var thead = table.getElementsByTagName("THEAD")[0];
var _rows = thead.getElementsByTagName("TR");
var tableheader = _rows[_rows.length - 1];
var headercells = tableheader.cells;
// Apply width to header ..
for(var i=0;i<headercells.length;i++){
headercells[i].width = widtharray[i];
}
// ADD 16 Pixel of scroll bar to last column ..
headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;
tableheader.style.display = "block";
_tbody.style.display = "block";
}
Esta solución descubre cuál es el ancho de la columna del navegador
y establecer nuevamente el mismo ancho a las columnas (encabezado y primera fila de tbody)
después de que se establece el ancho; la pantalla thead> tr y tbody está configurada para bloquear
Espero que esta solución sea útil para todos ustedes ..
si puede extenderlo a otros navegadores, responda esta publicación
Esto es bastante raro, pero tal vez ayudará a alguien en algún lugar ...
Utiliza columnas en lugar de filas, por lo que su procesamiento se haría esencialmente al revés.
DOCTYPE de transición agregado para compatibilidad con IE.
Pensé que lanzaría mi solución a la mezcla - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ .
Toma la misma ruta básica que la solución de @Michael Koper, pero incluye una solución para que la tabla se vea correcta en IE de vuelta a IE6.
Resuelvo el problema de ancho dando a la <table> un table-layout: fixed y explícitamente asignando ancho a las celdas en cada columna. No es ideal, pero produce una tabla semántica que alineará el navegador cruzado independientemente de si se necesita una barra de desplazamiento.
Demostración: http://codepen.io/tjvantoll/pen/JEKIu
Pruebe el primer método de esta página, CSS puro con una sola tabla (2 divs alrededor de la tabla, y thead se ubica absoluto): http://www.cssplay.co.uk/menu/tablescroll.html Parece que funciona en FF4 / IE9 / IE8 además de IE7 / FF3.6.
Puede ser exagerado para esta pregunta, pero YUI aún ofrece posiblemente la mejor tabla de datos cruzada entre navegadores. También se puede usar para datos de solo lectura.
Haga clic en los ejemplos para ver muestras desplazables. Como soy un novato en , solo puedo publicar estos dos enlaces.
Si alguien lo necesita para trabajar en el modo peculiar de IE, así es como cambié y simplifiqué el código de IG Pascual para que funcione:
.fixed_table{
overflow: scroll;
overflow-x: hidden;
max-height: 300px;
height: 300px;
min-height: 50px;
padding-right:0;
}
#datatable td
{
padding:3px;
text-align: center;
width: 9%;
vertical-align: middle;
background-color: #343435;
color: #E0E0E3;
overflow:hidden;
}
<div class="head">
<table>
<thead>
<tr>
<th>Time (GMT)</th>
<th>Price</th>
</tr>
</thead>
</table>
</div>
<div class="fixed_table">
<table id="datatable" cellspacing="1" cellpadding="1">
<tbody></tbody>
</table>
</div>
Tuve el mismo problema y escribí un script de jQuery para hacer esto por mí ... usa dos elementos de tabla y formatea el CSS en consecuencia. Espero que esto ayude a otros que tienen el mismo problema ...
Uso de la pantalla: el estilo de bloque solo funciona si tiene 1 columna. Si tiene varias columnas de datos, con múltiples campos, entonces aparece: block parece hacer que todas las columnas de datos sean desplazables, pero debajo de la primera columna (hace lo mismo en Firefox, que es el único navegador que conozco que funciona bien). Por cierto, en Firefox, puedes usar el estilo overflow-x: hidden para suprimir el desplazamiento horizontal.
Me di cuenta de que el problema que menciono solo ocurre si no especificas un ancho para los elementos th y td; si puedes arreglar el ancho de las columnas, entonces funciona. El problema para mí es que no puedo arreglar el ancho de las columnas.
Vi la excelente solución de Sean Haddy y me tomé la libertad de hacer algunas ediciones :
- Use clases en lugar de ID, por lo que una secuencia de comandos jQuery podría reutilizarse para varias tablas en una página
- Se agregó soporte para elementos semánticos de la tabla HTML como caption, thead, tfoot y tbody
- Se hizo la barra de desplazamiento opcional para que no aparezca en las tablas que son "más cortas" que la altura desplazable
- Ancho de div desplazable ajustado para llevar la barra de desplazamiento al borde derecho de la tabla
- Hecho concepto accesible por
- usando aria-hidden = "true" en el encabezado de la tabla estática inyectada
- y dejando el thead original en su lugar, simplemente oculto con jQuery y estableciendo
aria-hidden="false"
- Mostró ejemplos de múltiples tablas con diferentes tamaños
Sin embargo, Sean hizo el trabajo pesado. Gracias a Matt Burland, también, para señalar hay que apoyarlo.
Véalo usted mismo en http://jsfiddle.net/jhfrench/eNP2N/