javascript - diseño - tablas en html ejemplos
Tabla html de gran tamaño dinámico con una fila de desplazamiento fija y una columna de desplazamiento fija (6)
Necesito mostrar una tabla grande en una página web y debo evitar que la primera columna y la primera fila se desplacen. Me gustaría establecer dinámicamente el tamaño vertical de esta tabla (entre un contenido de página de encabezado / pie de página de tamaño estático) para que sea lo más alto posible sin forzar que la ventana del navegador tenga una barra de desplazamiento vertical.
browser window//
+--------------------------------------------------------------+ //
| // // // // // // // // | fixed static
| web page header fields and text | | size
| // // // // // // // // |__//__
| +----<<<table-scrollbar>>>>>----------------+ | //
|+--------------+--------+--------+--------+--------+-------+ | |
|| | |colspan | | | fixed | | |
|| fixed | fixed | fixed | fixed | fixed | more> | | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ | |
|| fixed | | | | | | | | | | || | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+t | |
|| fixed | | | | | | | | | | |a | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+b | |
|| fixed | | | | | | | | | | |l | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+e | set
|| fixed | | | | | | | | | | || | dynamic
|| multi-line | | | | | | | | | | |s | size at
|+--------------+--+--+--+---+----+--+--+--+--------+-------+c | runtime
|| fixed | | | | | | | | | | |r | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+o | |
|| fixed | | | | | | | | | | |l | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+l | |
|| fixed | | | | | | | | | | |b | |
|| | | | | | | | | | | |a
|+--------------+--+--+--+---+----+--+--+--+--------+-------+r | |
|| fixed, moreV | | | | | | | | | | || | |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |__//__
| // // // // // // // // | //
| web page footer fields and text | fixed static
| // // // // // // // // | | size
+--------------------------------------------------------------+ //
esto solo necesita funcionar en los navegadores modernos, usando all / any: html, css, javascript, jquery
Orden de importancia:
- tabla compleja con muchos campos de formulario, valores ocultos, javascript que colapsa filas, etc. que agregaré más adelante
- 1ª fila tendrá colspans
- las filas tendrán altura variable
- 1ª fila: fija desde desplazamiento vertical, pero puede desplazarse horizontalmente
- 1ª columna: fija desde desplazamiento horizontal, pero puede desplazarse verticalmente
- dimensione dinámicamente esta "tabla" para llenar la pantalla entre el tamaño del encabezado / pie de página estático
- la ubicación de las barras de desplazamiento (como se muestra en mi increíble arte de ascii) no es crítica.
Aquí hay una muestra html muy básica de la pantalla, sin ninguna de las características de desplazamiento / tamaño:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
</HEAD>
<BODY>
<form name="MyForm" method="POST" action="">
<!-- static size header junk--><!-- static size header junk--><!-- static size header junk-->
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">header junk left</td>
<td >- HEADER JUNK MIDDLE -</td>
<td width="35%" align="right">header junk right</td>
</tr>
</table>
<br>
<table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="60%" align="left">header junk left</td>
<td width="40%" align="right">check it out! <input type="checkbox" onchange="alert(''your javascript here'');" value="Y" name="checkitout"></td>
</tr>
<!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
<table border="1" width="95%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td>fixed can be long<br>or short</td>
<td colspan="4">scroll A</td>
<td colspan="2">scroll B</td>
<td >scroll C</td>
<td colspan="4">scroll D</td>
<td colspan="2">scroll E</td>
<td >scroll F</td>
<td colspan="4">scroll G</td>
<td colspan="2">scroll H</td>
<td >scroll I</td>
<td colspan="4">scroll J</td>
<td colspan="2">scroll K</td>
<td >scroll L</td>
<td colspan="4">scroll M</td>
<td colspan="2">scroll N</td>
<td >scroll O</td>
</tr>
<tr>
<td>fixed 2</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td>fixed 3</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td>fixed 4</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td>fixed 5</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td>fixed 6<br>6<br>6<br>6</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
</table>
<!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">footer junk left</td>
<td >- FOOTER JUNK MIDDLE -</td>
<td width="35%" align="right">footer junk right</td>
</tr>
</form>
</BODY>
</HTML>
Estoy de acuerdo con la respuesta de @FedericoGiust ; pero como pediste más detalles ...
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="http://datatables.net/download/build/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
src="http://datatables.net/download/build/FixedColumns.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var oTable = $(''#bigtable'').dataTable({
"sScrollY": "300px", // set vertical size dynamically here
"sScrollX": "100%",
"bPaginate": false,
"bFilter": false
});
new FixedColumns(oTable);
});
</script>
Debe agregar una fila de encabezados de columnas ficticias para que los Datos de Datos puedan hacer frente a los colspans.
Funciona con tablas normales y solo altera las celdas de encabezado, en su lugar (sin eliminar, copiar, o fuera de la inyección de elementos de la tabla). Esto tiene la ventaja de permitir cualquier contenido, en cualquier celda, de cualquier dimensión (+ permite la modificación dinámica de ese contenido).
fullpage.html en acción: fullpage.html , overflow_scroll.html , fullpage_untouched.html .
Las celdas verticales y horizontales deben permanecer visibles y alineadas durante el desplazamiento.
Esta solución no utiliza ningún framework. No dude en reemplazar los ayudantes existentes (desplazamientos de desplazamiento) usando jquery o prototype (o cualquier otro marco).
Debe agregar enganches de código para llamar a _table_make_fixed_header_reposition cuando realice cambios dinámicos en el contenido de la tabla.
No probé esto en Windows XP (donde la representación acelerada está ausente en todos los navegadores).
El fondo azul, la sombra, los bordes, etc. son solo cosas interesantes de CSS. Puede hacer esto como quiera y solo tiene que crear una tabla normal (solo agregue estilos de celda en .DivWrapper lugar de TH ).
<!DOCTYPE html>
<body>
<head>
<style>
.TableLarge td, .TableLarge th{
border-style: solid;
border-width: 1px;
border-color: #CAE3EF;
padding: 7px;
white-space: nowrap;
font-family: Verdana;
font-size: 10px;
}
.TableLarge{
border-style: none;
border-collapse: collapse;
}
#padding_for_test{
height: 3000px;
width: 9000px;
}
</style>
<script type="text/javascript">
function table_make_fixed_header(elTable, bHorizontal, bVertical, nRepositionIntervalMilliseconds, bWrappedByScrollableDiv)
{
if(!bHorizontal && !bVertical)
return;
if(!elTable.id)
elTable.id="FixedVH_Headers_"+(new Date().getTime())+Math.floor(Math.random()*10000000);
var zIndex=1;
if(window.getComputedStyle)
zIndex=parseInt(window.getComputedStyle(elTable))?parseInt(window.getComputedStyle(elTable))+1:1;
var fnSetupHeaderCell=function(elCell, zIndex)
{
var elDivWrapper=document.createElement("div");
elDivWrapper.setAttribute("style", "-moz-box-shadow: 3px 3px 4px #aaaaaa; -webkit-box-shadow: 3px 3px 4px #aaaaaa; box-shadow: 3px 3px 4px #aaaaaa;");
elDivWrapper.style.zIndex=zIndex;
elDivWrapper.style.backgroundColor="#0000ee";
elDivWrapper.style.color="white";
elDivWrapper.style.padding="3px";
elDivWrapper.className="DivWrapper";
elDivWrapper.style.position="relative";
while(elCell.childNodes.length)
elDivWrapper.appendChild(elCell.childNodes[0]);
elCell.appendChild(elDivWrapper);
};
if(bVertical)
for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
fnSetupHeaderCell(elTable.rows[r].cells[0], zIndex);
if(bHorizontal)
for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
fnSetupHeaderCell(elTable.rows[0].cells[c], zIndex);
_table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
//this could be CPU intensive, depending on the number of events fired and size of the table.
var onScrollEventHandler=function(ev){
_table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
};
var elScrollable=bWrappedByScrollableDiv?elTable.parentNode:window;
if(elScrollable.addEventListener)
elScrollable.addEventListener(''scroll'', onScrollEventHandler, false);
else if (elScrollable.attachEvent)
elScrollable.attachEvent(''scroll'', onScrollEventHandler);
//this is undesired for performance reasons, hooks and event listeners are prefered instead.
if(nRepositionIntervalMilliseconds>0)
setInterval("_table_make_fixed_header_reposition(''"+elTable.id+"'', "+(bHorizontal?"true":"false")+", "+(bVertical?"true":"false")+", "+(bWrappedByScrollableDiv?"true":"false")+")", nRepositionIntervalMilliseconds);
}
function _table_make_fixed_header_reposition(strTableID, bHorizontal, bVertical, bWrappedByScrollableDiv)
{
var elTable=document.getElementById(strTableID);
var strLeft;
var strTop;
if(bWrappedByScrollableDiv)
{
strLeft=Math.min(Math.max(elTable.parentNode.scrollLeft-elTable.offsetLeft+elTable.parentNode.offsetLeft, 0), elTable.offsetWidth)+"px";
strTop=Math.min(Math.max(elTable.parentNode.scrollTop-elTable.offsetTop+elTable.parentNode.offsetTop, 0), elTable.offsetHeight)+"px";
}
else
{
strLeft=Math.min(Math.max(f_scrollLeft()-elTable.offsetLeft, 0), elTable.offsetWidth)+"px";
strTop=Math.min(Math.max(f_scrollTop()-elTable.offsetTop, 0), elTable.offsetHeight)+"px";
}
if(bVertical)
for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
elTable.rows[r].cells[0].childNodes[0].style.left=strLeft;
if(bHorizontal)
for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
elTable.rows[0].cells[c].childNodes[0].style.top=strTop;
}
//http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
function f_scrollLeft(){
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
//you should add an event handler for onload here
</script>
</head>
<body>
<p>
Vertical and horizontal th cells should remain visible and aligned while scrolling.<br>
This solution does not use any frameworks. Feel free to replace existing helpers (scroll offsets) using jquery or prototype (or any other framework).
</p>
<div style="width: 800px; height: 600px; overflow: scroll">
<table class="TableLarge" id="mySpecialHugeTable">
<tr>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
<th>Fixed!</th>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>This is a very short story...Real short.</td>
<td>Umm...how is this done again?</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
<tr>
<th>Fixed!<br>multi-line</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>Umm...how is this done again?</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
<td>This is a very short story...Real short.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>The goose is pretty.</td>
<td>The goose is pretty.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>The goose is pretty.</td>
<td>Umm...how is this done again?</td>
<td>Hello world!</td>
<td>This is a very short story...Real short.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
</tr>
<tr>
<th>Fixed!</th>
<td>The goose is pretty.</td>
<td>Hello world!</td>
<td>Hello world!</td>
<td>Umm...how is this done again?</td>
<td>My mother has apples.</td>
<td>My mother has apples.</td>
<td>I think Javascript is some kind of Voodoo on the DOM.</td>
<td>This is a very short story...Real short.</td>
</tr>
</table>
</div>
<div id="padding_for_test"> </div>
<script type="text/javascript">
table_make_fixed_header(document.getElementById("mySpecialHugeTable"), /*bHorizontal*/ true, /*bVertical*/ true, 1000, /*bWrappedByScrollableDiv*/ true);
</script>
</body>
</html>
Debería ser bastante fácil eliminar algo de CSS y hacer que las celdas fijas sean idénticas a las celdas desplazables. Además, si desea una barra de desplazamiento dedicada, puede DIVajustarla de forma desplazable y ajustarla _table_make_fixed_header_repositionutilizando los DIVdesplazamientos de desplazamiento de ''también.
Edición : código actualizado para mantener los encabezados lo más cerca posible del borde, cuando la tabla sale de la ventana gráfica (opción + para elegir entre encabezados verticales u horizontales, o ambos).
Edit2 : agregado divsoporte desplazable , y lo convirtió en el predeterminado en el ejemplo.
Puedes usar DataTables
Es un increíble complemento de jquery para tablas, y también tiene un número interesante de extras y complementos que incluyen encabezado y pie de página fijos, clasificación de columnas, ancho variable, ancho fijo, ajax y mucho más.
Edición 5: - Se agregaron filas y columnas fijas configurables. - Problemas de altura y ancho de columna fijos - Uso reducido de selectores complejos
Uso:
$(''#cTable'').cTable({
width: 1300,
height: 500,
fCols: 2,
fRows: 2
});
DEMO: http://jsfiddle.net/rCuPf/7/embedded/result/ (demostración actualizada)
Edición 4: Actualizado para colSpan en la columna 1. Demo: http://jsfiddle.net/skram/rKjk3/26/
Edición 3: Realicé algunas tareas de limpieza y algunas correcciones: http://jsfiddle.net/rKjk3/22 Probado en IE9, FF y Chrome. (No tengo el último IE para probarlo ahora)
Edición 2: Corrección para IE: http://jsfiddle.net/rKjk3/15/embedded/result/ (Ver más arriba)
Edición 1: Corrección para la ventana de cambio de tamaño http://jsfiddle.net/rKjk3/11/ (Ver más arriba)
- Se agregó el controlador de eventos window.resize para establecer el ancho del
rightContainermodo que el ancho de la tabla real se incrementará a medida querightContainerel tamaño. - Se eliminó el ancho fijo en
SBWrapperpara que pueda utilizar completamente el espacio disponible dentro del contenedor.
He creado 2 demo para su requerimiento.
Muestra para mostrar cómo se verá el html representado con una estructura de marcado simple. Esto le permitirá ver la estructura que se está representando y cómo está funcionando :)
DEMO: http://jsfiddle.net/GmJ22/7/Demostración real con el marcado que has publicado. El código es solo una versión aproximada y puede requerir alguna limpieza. Ahora mismo puedes configurar el ancho y alto de la tabla. Lo estoy publicando para que pueda echar un vistazo y darme algunos comentarios.
DEMO:http://jsfiddle.net/rKjk3/10/embedded/result/(ver versiones corregidas a continuación)
Código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$.fn.cTable = function(o) {
this.wrap(''<div class="cTContainer" />'');
this.wrap(''<div class="relativeContainer" />'');
//Update below template as how you have it in orig table
var origTableTmpl = ''<table border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ></table>'';
//get row 1 and clone it for creating sub tables
var row1 = this.find(''tr'').slice(0, o.fRows).clone();
var r1c1ColSpan = 0;
for (var i = 0; i < o.fCols; i++ ) {
r1c1ColSpan += this[0].rows[0].cells[i].colSpan;
}
//create table with just r1c1 which is fixed for both scrolls
var tr1c1 = $(origTableTmpl);
row1.each(function () {
var tdct = 0;
$(this).find(''td'').filter( function () {
tdct += this.colSpan;
return tdct > r1c1ColSpan;
}).remove();
});
row1.appendTo(tr1c1);
tr1c1.wrap(''<div class="fixedTB" />'');
tr1c1.parent().prependTo(this.closest(''.relativeContainer''));
//create a table with just c1
var c1= this.clone().prop({''id'': ''''});
c1.find(''tr'').slice(0, o.fRows).remove();
c1.find(''tr'').each(function (idx) {
var c = 0;
$(this).find(''td'').filter(function () {
c += this.colSpan;
return c > r1c1ColSpan;
}).remove();
});
var prependRow = row1.first().clone();
prependRow.find(''td'').empty();
c1.prepend(prependRow).wrap(''<div class="leftSBWrapper" />'')
c1.parent().wrap(''<div class="leftContainer" />'');
c1.closest(''.leftContainer'').insertAfter(''.fixedTB'');
//create table with just row 1 without col 1
var r1 = $(origTableTmpl);
row1 = this.find(''tr'').slice(0, o.fRows).clone();
row1.each(function () {
var tds = $(this).find(''td''), tdct = 0;
tds.filter (function () {
tdct += this.colSpan;
return tdct <= r1c1ColSpan;
}).remove();
});
row1.appendTo(r1);
r1.wrap(''<div class="topSBWrapper" />'')
r1.parent().wrap(''<div class="rightContainer" />'')
r1.closest(''.rightContainer'').appendTo(''.relativeContainer'');
$(''.relativeContainer'').css({''width'': ''auto'', ''height'': o.height});
this.wrap(''<div class="SBWrapper"> /'')
this.parent().appendTo(''.rightContainer'');
this.prop({''width'': o.width});
var tw = 0;
//set width and height of rendered tables
for (var i = 0; i < o.fCols; i++) {
tw += $(this[0].rows[0].cells[i]).outerWidth(true);
}
tr1c1.width(tw);
c1.width(tw);
$(''.rightContainer'').css(''left'', tr1c1.outerWidth(true));
for (var i = 0; i < o.fRows; i++) {
var tr1c1Ht = $(c1[0].rows[i]).outerHeight(true);
var thisHt = $(this[0].rows[i]).outerHeight(true);
var finHt = (tr1c1Ht > thisHt)?tr1c1Ht:thisHt;
$(tr1c1[0].rows[i]).height(finHt);
$(r1[0].rows[i]).height(finHt);
}
$(''.leftContainer'').css({''top'': tr1c1.outerHeight(true), ''width'': tr1c1.outerWidth(true)});
var rtw = $(''.relativeContainer'').width() - tw;
$(''.rightContainer'').css({''width'' : rtw, ''height'': o.height, ''max-width'': o.width - tw});
var trs = this.find(''tr'');
trs.slice(1, o.fRows).remove();
trs.slice(0, 1).find(''td'').empty();
trs.each(function () {
var c = 0;
$(this).find(''td'').filter(function () {
c += this.colSpan;
return c <= r1c1ColSpan;
}).remove();
});
r1.width(this.outerWidth(true));
for (var i = 1; i < c1[0].rows.length; i++) {
var c1Ht = $(c1[0].rows[i]).outerHeight(true);
var thisHt = $(this[0].rows[i]).outerHeight(true);
var finHt = (c1Ht > thisHt)?c1Ht:thisHt;
$(c1[0].rows[i]).height(finHt);
$(this[0].rows[i]).height(finHt);
}
$(''.SBWrapper'').css({''height'': $(''.relativeContainer'').height() - $(''.topSBWrapper'').height()});
$(''.SBWrapper'').scroll(function () {
var rc = $(this).closest(''.relativeContainer'');
var lfW = rc.find(''.leftSBWrapper'');
var tpW = rc.find(''.topSBWrapper'');
lfW.css(''top'', ($(this).scrollTop()*-1));
tpW.css(''left'', ($(this).scrollLeft()*-1));
});
$(window).resize(function () {
$(''.rightContainer'').width(function () {
return $(this).closest(''.relativeContainer'').outerWidth() - $(this).siblings(''.leftContainer'').outerWidth();
});
});
}
$(''#cTable'').cTable({
width: 1300,
height: 500,
fCols: 2,
fRows: 2
});
});
</script>
<style>
.cTContainer { overflow: hidden; padding: 2px; }
.cTContainer table { table-layout: fixed; }
.relativeContainer { position: relative; overflow: hidden;}
.fixedTB { position: absolute; z-index: 11; }
.leftContainer { position: absolute; overflow: hidden; }
.rightContainer { position: absolute; overflow: hidden; }
.leftSBWrapper { position: relative; z-index: 10; }
.topSBWrapper { position: relative; z-index: 10; width: 100%; }
.SBWrapper { width: 100%; overflow: auto; }
td { background-color: white; overflow: hidden; padding: 1px; }
</style>
</HEAD>
<BODY>
<form name="MyForm" method="POST" action="">
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">header junk left</td>
<td >- HEADER JUNK MIDDLE -</td>
<td width="35%" align="right">header junk right</td>
</tr>
</table>
<br />
<table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="60%" align="left">header junk left</td>
<td width="40%" align="right">check it out! <input type="checkbox" onchange="alert(''your javascript here'');" value="Y" name="checkitout"></td>
</tr>
</table>
<!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
<table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="cTable" >
<tr>
<td width="5%" colspan="3">fixed can be long<br>or short</td>
<td width="9%" colspan="4">scroll A</td>
<td width="7%" colspan="2">scroll B</td>
<td width="3%">scroll C</td>
<td width="9%" colspan="4">scroll D</td>
<td width="7%" colspan="2">scroll E</td>
<td width="3%">scroll F</td>
<td width="9%" colspan="4">scroll G</td>
<td width="7%" colspan="2">scroll H</td>
<td width="3%">scroll I</td>
<td width="9%" colspan="4">scroll J</td>
<td width="7%" colspan="2">scroll K</td>
<td width="3%">scroll L</td>
<td width="9%" colspan="4">scroll M</td>
<td width="7%" colspan="2">scroll N</td>
<td width="3%">scroll O</td>
</tr>
<tr>
<td width="5%" colspan="3">2nd fixed header</td>
<td width="9%" colspan="4">scroll 2A</td>
<td width="7%">scroll 2B-1</td>
<td width="7%">scroll 2B-2 </td>
<td width="3%">scroll 2C</td>
<td width="9%" colspan="4">scroll 2D</td>
<td width="7%" colspan="2">scroll 2E</td>
<td width="3%">scroll 2F</td>
<td width="9%" colspan="4">scroll 2G</td>
<td width="7%" colspan="2">scroll 2H</td>
<td width="3%">scroll 2I</td>
<td width="9%" colspan="4">scroll 2J</td>
<td width="7%" colspan="2">scroll 2K</td>
<td width="3%">scroll 2L</td>
<td width="9%" colspan="4">scroll 2M</td>
<td width="7%" colspan="2">scroll 2N</td>
<td width="3%">scroll 2O</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1 1 1 1 1 A</td>
<td>2 2 2 2 2 A</td>
<td>3 3 3 3 3 A</td>
<td>4 4 4 4 4 A</td>
<td>1 B</td>
<td>2 B</td>
<td >1 C</td>
<td>1 D</td>
<td>2 D</td>
<td>3 D</td>
<td>4 D<br>more...</td>
<td>1 E</td>
<td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td>
<td>2 2 G</td>
<td>3 G</td>
<td>4 4 4 4 G</td>
<td>1 H</td>
<td>222 H</td>
<td >1 I</td>
<td>1 J</td>
<td>2 J</td>
<td>3 J</td>
<td>4 J</td>
<td>1 K</td>
<td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td>
<td>22 M</td>
<td>333 M</td>
<td>4444 M</td>
<td>1 N</td>
<td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td colspan="2">fixed 3</td>
<td>3</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td colspan="3">fixed 4</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td colspan="3">fixed 5</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
<td>1 B</td><td>2 B</td>
<td >1 C</td>
<td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
<td>1 E</td><td>2 E</td>
<td >1 F</td>
<td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
<td>1 H</td><td>222 H</td>
<td >1 I</td>
<td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
<td>1 K</td><td>2 2 K<br>more..<br>more..</td>
<td >1 L</td>
<td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
<td>1 N</td><td>2 N</td>
<td >1 1 1 1 1 1 1 O</td>
</tr>
</table>
<br />
<!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">footer junk left</td>
<td >- FOOTER JUNK MIDDLE -</td>
<td width="35%" align="right">footer junk right</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Si no te gusta usar complementos pesados, puedes hacer:
Crear una tabla con solo el encabezado de la tabla fija
Cree un div con ancho fijo (recuerde el ancho de la barra de desplazamiento) y la altura y establezca la dirección Y de desplazamiento. Dentro de este div colocas el cuerpo de la mesa.
Crea la 3ª y la última tabla y coloca la tabla debajo de la división para que se vea como 1 gran mesa.
<table> HEADER </table>
<div><table> BODY </table></div> (div is scrollable)
<table> Foot </table>
Si necesita realizar cambios dinámicamente, use bare javascript, no necesita usar jquery u otro complemento pesado.
Si prefiere no ir con un complemento, combine el desplazamiento vertical de encabezado fijo (CSS)
tbody{display:block;overflow-y:auto;/*+fixed height set w/jQuery etc*/}
Con la primera columna fija desplazamiento horizontal (JS)
$(''#table-container'').scroll(function() {
var _left = $(this).scrollLeft();
$(''#table th'').css(''left'', _left); //"stick" the first column to viewport
});
#table-container{overflow-x:scroll;/*+fixed width set*/}
thead, tbody{display:block;}
th {position:relative;left:0;/*gets adjusted with JS above*/}
Sin embargo , aquí no se trata de cambiar el tamaño para ajustarse a las dimensiones del navegador. Suponiendo que se ejecutará en una ventana dedicada, sería bastante trivial; si no, y está pensado para ejecutarse en la página, sería bastante difícil mantenerlo despejado.
Buena suerte.