Hacer TBODY desplazable en los navegadores Webkit
https://stackoverflow.com/questions/1019938
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Soy consciente de esta pregunta, pero ninguna de las respuestas trabajo en Safari, Chrome, etc.
La estrategia aceptada (como se ha demostrado aquí) es la de establecer la tbody la altura y el desbordamiento de propiedades como:
<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>
Por desgracia, esto no funciona en cualquiera de los navegadores webkit.Hay un informe de error sobre lo que no parece ser una prioridad más alta (reportado 05 de junio).
Así que mi pregunta es:existen estrategias alternativas que hacen en realidad?Yo he probado las dos de la tabla de enfoque, pero es imposible garantizar que el encabezado de la línea con el contenido.¿Sólo tengo que esperar para Webkit para solucionarlo?
Solución
Aquí hay un ejemplo de trabajo:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Debe agregar la pantalla: bloque al thead > tr y tbody
Otros consejos
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 visualice: el bloque parece hacer que todas las columnas de datos se puedan desplazar pero debajo de la primera columna (hace lo mismo en Firefox, que es el único navegador que conozco que se desplaza muy bien). Por cierto, en Firefox, puede 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 el amplificador th &; elementos td: si puede arreglar los anchos de columna, entonces funciona. El problema para mí es que no puedo arreglar el ancho de las columnas.
Pruebe el primer método de esta página, CSS puro con una sola tabla (2 divs alrededor de la tabla, y el thead se posiciona absoluto): http://www.cssplay.co.uk/menu/tablescroll.html Parece funcionar en FF4 / IE9 / IE8 además de IE7 / FF3.6.
Tuve el mismo problema y escribí un script 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 ...
Vi la excelente solución de Sean Haddy y tomé la excelente solución libertad de realizando algunas modificaciones :
- Use clases en lugar de ID, por lo que un script jQuery podría reutilizarse para varias tablas en una página
- Soporte agregado para elementos de tabla HTML semánticos como subtítulos, thead, tfoot y tbody
- La barra de desplazamiento es opcional para que no aparezca para las tablas que son " más cortas " que la altura desplazable
- Se ajustó el ancho del div de desplazamiento para llevar la barra de desplazamiento hasta el borde derecho de la tabla
- Hecho concepto accesible por
- usando aria-hidden = " verdadero " en el encabezado de la tabla estática inyectada
- y dejando el thead original en su lugar, solo oculto con jQuery y configurado
aria-hidden="false"
- Muestra ejemplos de varias tablas con diferentes tamaños
Sean hizo el trabajo pesado, sin embargo. Gracias a Matt Burland, también, por señalar la necesidad de apoyar el pie.
Por favor, compruébelo usted mismo en http://jsfiddle.net/jhfrench/eNP2N/
Un enfrentaron el mismo problema hace mucho tiempo, y finalmente se establecen las dos tablas de enfoque.Este es el resultado: http://jsfiddle.net/bGr4V/3/, eso funciona para todos los navegadores (IE6+ incl).
En este jsFiddle usted puede jugar con una versión limpia.
Mi solución fue añadir un revisión de la célula <th class="fix"> </th> en thead para llenar el espacio de la barra de desplazamiento en la tbody, a continuación, dar una columna, un ancho variable (<td class="grow">), por lo que el encabezado revisión de la célula no desvincular sobre cómo cambiar el 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: ha * y _ hack para ie6-7, y un -webkit específico para el encabezado fix-celular la coincidencia de desplazamiento de ancho 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 }
}
Pensé en tirar mi solución en la mezcla - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/.
Se toma la misma ruta básica como @Michael Koper la solución, pero se incluye una solución por lo que la tabla va a ser correctos en IE volver a IE6.
Voy a resolver el ancho problema dándole la <table> un table-layout: fixed de forma explícita y asignación de ancho de celdas de cada columna.No es ideal, sino que se produce una semántica de la tabla que se alinee con todos los navegadores, independientemente de si una barra de desplazamiento que se necesita.
Desarrollé una solución javascript para el problema anterior
que funciona solo en Firefox 7+ ya que lo he probado solo 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) arreglar el ancho de la columna
2) thead & Gt; tr display está configurado para bloquear
3) la pantalla tbody está configurada para bloquear
como otros han mencionado su problema para arreglar el ancho, también estoy en la misma posición;
incluso no puedo arreglar el ancho estáticamente
así que pensé que arreglaría el ancho dinámicamente (después de que la tabla se representa en el navegador) y esto hizo el truco :)
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 columna del navegador
y vuelva a establecer el mismo ancho en columnas (encabezado y primera fila de tbody)
después de establecer el ancho; thead > tr and tbody display está configurado para bloquear
Espero que esta solución sea útil para todos ustedes ..
si puede extenderlo a otros navegadores, responda a esta publicación
Esto es realmente hacky pero quizás ayudará a alguien en algún lugar ...
Utiliza columnas en lugar de filas, por lo que el procesamiento se haría esencialmente al revés.
DOCTYPE de transición agregado para compatibilidad con IE.
Puede ser excesivo para esta pregunta, pero YUI aún proporciona posiblemente la mejor tabla de datos gratuita para varios 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 stackoverflow, solo puedo publicar estos dos enlaces.
Agregar display:block; Esto también eliminará el desplazamiento horizontal innecesario en FireFox. También, sin duda, sabe que ninguno de los 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 que funciona en IE5 +, Firefox y Chrome. Sin embargo, utiliza columnas de ancho fijo. http://www.cssplay.co.uk/menu/tablescroll.html
Si alguien necesita que funcione en el modo peculiar de IE, así es como cambié y simplifiqué I.G. Código de Pascual para trabajar:
.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>
Deje que la tabla dibuje a su manera y calcule el ancho de cada columna y colóquelo en cada encabezado. Los encabezados se hacen 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>
