html - tablas - Tener Google Chrome repita encabezados de tabla en páginas impresas
table generator html (6)
Creo que esto es un bug en Chrome.
Me gustaría que los encabezados de mi tabla se repitan para cada página impresa, pero parece que Google Chrome no admite bien la etiqueta <thead> ... ¿hay alguna forma de evitar esto? Estoy usando Google Chrome v13.0.782.215.
El código de la tabla es muy sencillo ... nada extravagante:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@page {
size: landscape;
margin-top: 0;
margin-bottom: 1cm;
margin-left: 0;
margin-right: 0;
}
table {
border: .02em solid #666; border-collapse:collapse;
width:100%;
}
td, th {
border: .02em solid #666; font-size:12px; line-height: 12px;
vertical-align:middle; padding:5px; font-family:"Arial";
}
th { text-align:left; font-size:12px; font-weight:bold; }
h2 { margin-bottom: 0; }
</style>
</head>
<body>
<h2>Page Title</h2>
<table>
<thead>
<tr class="row1">
<th><strong>Heading 1</strong></th>
<th><strong>Heading 2</strong></th>
<th><strong>Heading 3</strong></th>
<th><strong>Heading 4</strong></th>
<th><strong>Heading 5</strong></th>
</tr>
</thead>
<tbody>
<tr class="row2">
<td width="30">...</td>
<td width="30">...</td>
<td width="90">....</td>
<td width="190">...</td>
<td width="420">...</td>
</tr>
<tr class="row1">
<td width="30">...</td>
<td width="30">...</td>
<td width="90">....</td>
<td width="190">...</td>
<td width="420">...</td>
</tr>
....
</tbody>
</table>
</body>
</html>
Cualquier idea sobre esto es bienvenida.
De mi prueba en la display: table-row-group; configuración de cromo display: table-row-group; al thead detiene el problema que está sucediendo.
por ejemplo, si intenta imprimir el siguiente sin el estilo, verá el número en la parte superior de cada página, pero si agrega el estilo, solo aparece en el menú contextual.
<style>
thead {
display: table-row-group;
}
</style>
<table>
<thead>
<tr>
<th>number</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
<script>
for (i = 1; i <= 100; i++) {
document.getElementById("myTbody").innerHTML += "<tr><td>" + i + "</td></tr>";
}
</script>
Esta es una mejora que todavía no está disponible en Webkit, Blink y Vivliostyle, en lugar de en otros "formateadores orientados a impresión" (Firefox, IE).
Puedes consultar el problema de Google Chrome desde la versión 4 aquí (¡hace 6 años y 45 versiones!) , Donde podemos apreciar que últimamente tiene un propietario (febrero de 2016), que incluso parece estar trabajando en ello.
Algunas charlas también se han celebrado en el W3 donde podemos apreciar la preocupación sobre su utilidad:
Como repetir los encabezados y pies de página en una ruptura de fragmentación generalmente es algo útil, sugiero que formulemos un requisito normativo y digamos que los UA deben repetir las filas de encabezado / pie de página cuando una tabla abarca un salto.
Mientras tanto, los códigos JS y Jquery de @DoctorDestructo y @thefredzx han sido realmente útiles para mis usuarios que no usan Firefox ni IE (la mayoría de ellos).
El primero en enterarse de una nueva versión que incluye esta característica, debe notarlo aquí, muchos de nosotros lo agradeceríamos.
ahora es posible imprimir en chrome usando jQuery ... por favor prueba este código (lo siento, olvida quién es el creador de este código antes de modificarlo y mi idioma inglés no es bueno: D jejeje)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DOCUMENT TITLE</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/>
<style type="text/css">
@media print{
table { page-break-after:auto;}
tr { page-break-inside:avoid;}
td { page-break-inside:auto;}
thead { display:table-header-group }
.row-fluid [class*="span"] {
min-height: 20px;
}
}
@page {
margin-top: 1cm;
margin-right: 1cm;
margin-bottom:2cm;
margin-left: 2cm;'';
size:portrait;
/*
size:landscape;
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
*/
};
</style>
</head>
<body>
<div id="print-header-wrapper">
<div class="row-fluid">HEADER TITLE 1</div>
<div class="row-fluid">HEADER TITLE 2</div>
</div>
<div class="row-fluid" id="print-body-wrapper">
<table class="table" id="table_data">
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
</tbody>
</table>
<div id="lastDataTable"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function()
{
var printHeader = $(''#print-header-wrapper'').html();
var div_pageBreaker = ''<div style="page-break-before:always;"></div>'';
var per_page = 25;
$(''#table_data'').each(function(index, element)
{
//how many pages of rows have we got?
var pages = Math.ceil($(''tbody tr'').length / per_page);
//if we only have one page no more
if (pages == 1) {
return;
}
//get the table we''re splutting
var table_to_split = $(element);
var current_page = 1;
//loop through each of our pages
for (current_page = 1; current_page <= pages; current_page++)
{
//make a new copy of the table
var cloned_table = table_to_split.clone();
//remove rows on later pages
$(''tbody tr'', table_to_split).each(function(loop, row_element) {
//if we''ve reached our max
if (loop >= per_page) {
//get rid of the row
$(row_element).remove();
}
});
//loop through the other copy
$(''tbody tr'', cloned_table).each(function(loop, row_element) {
//if we are before our current page
if (loop < per_page) {
//remove that one
$(row_element).remove();
}
});
//insert the other table afdter the copy
if (current_page < pages) {
$(div_pageBreaker).appendTo(''#lastDataTable'');
$(printHeader).appendTo(''#lastDataTable'');
$(cloned_table).appendTo(''#lastDataTable'');
}
//make a break
table_to_split = cloned_table;
}
});
});
</script>
</body>
</html>
para los sistemas basados en navegador de la compañía, les aconsejo a los usuarios que utilicen Firefox o IE, para los sitios web destinados al público, creo que no podemos hacer nada al respecto si los usuarios usan Chrome o navegadores con limitaciones similares (también opera)
ACTUALIZACIÓN 2017-03-22: ¡Los encabezados de tabla que se repiten finalmente se implementaron en Chrome! (En realidad, creo que fueron implementados hace un tiempo). Eso significa que probablemente ya no necesites esta solución; simplemente ponga los encabezados de sus columnas en una etiqueta <thead> y debería estar todo listo. Use la solución a continuación solo si:
- te encuentras con errores de show-stopping en la implementación de Chrome,
- necesita las "características de bonificación", o
- necesita admitir algunos navegadores oddball que aún no son compatibles con la repetición de encabezados.
SOLUCIÓN (obsoleto)
El siguiente código muestra el mejor método que he encontrado para la impresión de tablas de varias páginas. Tiene las siguientes características:
- Los encabezados de columna se repiten en cada página
- No hay necesidad de preocuparse por el tamaño del papel o la cantidad de filas que se ajusten: el navegador maneja todo automáticamente
- Los saltos de página ocurren solo entre filas
- Los bordes de las celdas siempre están completamente cerrados
- Si se produce un salto de página cerca de la parte superior de la tabla, no se dejará atrás un subtítulo huérfano o encabezados de columna sin datos adjuntos (un problema que no se limita solo a Chrome)
- Funciona en Chrome (y otros navegadores basados en Webkit como Safari y Opera)
... y las siguientes limitaciones conocidas:
- Solo admite 1
<thead>(que aparentemente es lo máximo que se te permite tener de todos modos) - No es compatible con
<tfoot>(aunque los pies de página ejecutables compatibles con Chrome son técnicamente posibles ) - Solo admite
<caption>alineado a la parte superior - La tabla no puede tener
marginsuperior o inferior; para agregar espacios en blanco arriba o debajo de la tabla, inserte un div vacío y establezca un margen inferior en él - Cualquier valor de tamaño de CSS que afecte la altura (incluido
border-widthyline-height) debe estar enpx El ancho de columna no se puede establecer aplicando valores de ancho a celdas de tabla individuales; debe permitir que el contenido de la celda determine automáticamente el ancho de la columna o usar
<col>spara establecer anchos específicos si es necesarioLa tabla no se puede (fácilmente) cambiar dinámicamente después de que JS se haya ejecutado
EL CÓDIGO
<!DOCTYPE html>
<html>
<body>
<table class="print t1"> <!-- Delete "t1" class to remove row numbers. -->
<caption>Print-Friendly Table</caption>
<thead>
<tr>
<th></th>
<th>Column Header</th>
<th>Column Header</th>
<th>Multi-Line<br/>Column<br/>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</body>
</html>
<style>
/* THE FOLLOWING CSS IS REQUIRED AND SHOULD NOT BE MODIFIED. */
div.fauxRow {
display: inline-block;
vertical-align: top;
width: 100%;
page-break-inside: avoid;
}
table.fauxRow {border-spacing: 0;}
table.fauxRow > tbody > tr > td {
padding: 0;
overflow: hidden;
}
table.fauxRow > tbody > tr > td > table.print {
display: inline-table;
vertical-align: top;
}
table.fauxRow > tbody > tr > td > table.print > caption {caption-side: top;}
.noBreak {
float: right;
width: 100%;
visibility: hidden;
}
.noBreak:before, .noBreak:after {
display: block;
content: "";
}
.noBreak:after {margin-top: -594mm;}
.noBreak > div {
display: inline-block;
vertical-align: top;
width:100%;
page-break-inside: avoid;
}
table.print > tbody > tr {page-break-inside: avoid;}
table.print > tbody > .metricsRow > td {border-top: none !important;}
/* THE FOLLOWING CSS IS REQUIRED, but the values may be adjusted. */
/* NOTE: All size values that can affect an element''s height should use the px unit! */
table.fauxRow, table.print {
font-size: 16px;
line-height: 20px;
}
/* THE FOLLOWING CSS IS OPTIONAL. */
body {counter-reset: t1;} /* Delete to remove row numbers. */
.noBreak .t1 > tbody > tr > :first-child:before {counter-increment: none;} /* Delete to remove row numbers. */
.t1 > tbody > tr > :first-child:before { /* Delete to remove row numbers. */
display: block;
text-align: right;
counter-increment: t1 1;
content: counter(t1);
}
table.fauxRow, table.print {
font-family: Tahoma, Verdana, Georgia; /* Try to use fonts that don''t get bigger when printed. */
margin: 0 auto 0 auto; /* Delete if you don''t want table to be centered. */
}
table.print {border-spacing: 0;}
table.print > * > tr > * {
border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 0 5px 0 5px;
}
table.print > * > :first-child > * {border-top: 2px solid black;}
table.print > thead ~ * > :first-child > *, table.print > tbody ~ * > :first-child > * {border-top: none;}
table.print > * > tr > :first-child {border-left: 2px solid black;}
table.print > thead {vertical-align: bottom;}
table.print > thead > .borderRow > th {border-bottom: none;}
table.print > tbody {vertical-align: top;}
table.print > caption {font-weight: bold;}
</style>
<script>
(function() { // THIS FUNCTION IS NOT REQUIRED. It just adds table rows for testing purposes.
var rowCount = 100
, tbod = document.querySelector("table.print > tbody")
, row = tbod.rows[0];
for(; --rowCount; tbod.appendChild(row.cloneNode(true)));
})();
(function() { // THIS FUNCTION IS REQUIRED.
if(/Firefox|MSIE |Trident/i.test(navigator.userAgent))
var formatForPrint = function(table) {
var noBreak = document.createElement("div")
, noBreakTable = noBreak.appendChild(document.createElement("div")).appendChild(table.cloneNode())
, tableParent = table.parentNode
, tableParts = table.children
, partCount = tableParts.length
, partNum = 0
, cell = table.querySelector("tbody > tr > td");
noBreak.className = "noBreak";
for(; partNum < partCount; partNum++) {
if(!/tbody/i.test(tableParts[partNum].tagName))
noBreakTable.appendChild(tableParts[partNum].cloneNode(true));
}
if(cell) {
noBreakTable.appendChild(cell.parentNode.parentNode.cloneNode()).appendChild(cell.parentNode.cloneNode(true));
if(!table.tHead) {
var borderRow = document.createElement("tr");
borderRow.appendChild(document.createElement("th")).colSpan="1000";
borderRow.className = "borderRow";
table.insertBefore(document.createElement("thead"), table.tBodies[0]).appendChild(borderRow);
}
}
tableParent.insertBefore(document.createElement("div"), table).style.paddingTop = ".009px";
tableParent.insertBefore(noBreak, table);
};
else
var formatForPrint = function(table) {
var tableParent = table.parentNode
, cell = table.querySelector("tbody > tr > td");
if(cell) {
var topFauxRow = document.createElement("table")
, fauxRowTable = topFauxRow.insertRow(0).insertCell(0).appendChild(table.cloneNode())
, colgroup = fauxRowTable.appendChild(document.createElement("colgroup"))
, headerHider = document.createElement("div")
, metricsRow = document.createElement("tr")
, cells = cell.parentNode.cells
, cellNum = cells.length
, colCount = 0
, tbods = table.tBodies
, tbodCount = tbods.length
, tbodNum = 0
, tbod = tbods[0];
for(; cellNum--; colCount += cells[cellNum].colSpan);
for(cellNum = colCount; cellNum--; metricsRow.appendChild(document.createElement("td")).style.padding = 0);
cells = metricsRow.cells;
tbod.insertBefore(metricsRow, tbod.firstChild);
for(; ++cellNum < colCount; colgroup.appendChild(document.createElement("col")).style.width = cells[cellNum].offsetWidth + "px");
var borderWidth = metricsRow.offsetHeight;
metricsRow.className = "metricsRow";
borderWidth -= metricsRow.offsetHeight;
tbod.removeChild(metricsRow);
tableParent.insertBefore(topFauxRow, table).className = "fauxRow";
if(table.tHead)
fauxRowTable.appendChild(table.tHead);
var fauxRow = topFauxRow.cloneNode(true)
, fauxRowCell = fauxRow.rows[0].cells[0];
fauxRowCell.insertBefore(headerHider, fauxRowCell.firstChild).style.marginBottom = -fauxRowTable.offsetHeight - borderWidth + "px";
if(table.caption)
fauxRowTable.insertBefore(table.caption, fauxRowTable.firstChild);
if(tbod.rows[0])
fauxRowTable.appendChild(tbod.cloneNode()).appendChild(tbod.rows[0]);
for(; tbodNum < tbodCount; tbodNum++) {
tbod = tbods[tbodNum];
rows = tbod.rows;
for(; rows[0]; tableParent.insertBefore(fauxRow.cloneNode(true), table).rows[0].cells[0].children[1].appendChild(tbod.cloneNode()).appendChild(rows[0]));
}
tableParent.removeChild(table);
}
else
tableParent.insertBefore(document.createElement("div"), table).appendChild(table).parentNode.className="fauxRow";
};
var tables = document.body.querySelectorAll("table.print")
, tableNum = tables.length;
for(; tableNum--; formatForPrint(tables[tableNum]));
})();
</script>
CÓMO FUNCIONA (Si no le importa, no lea más, todo lo que necesita está arriba).
La solicitud de Per @ Kingsolmn, a continuación, es una explicación de cómo funciona esta solución. No cubre el JavaScript, que no es estrictamente necesario (aunque hace que esta técnica sea mucho más fácil de usar). En cambio, se centra en las estructuras HTML generadas y el CSS asociado, que es donde ocurre la verdadera magia.
Aquí está la tabla con la que trabajaremos:
<table>
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row1</td><td>row1</td></tr>
<tr><td>row2</td><td>row2</td></tr>
<tr><td>row3</td><td>row3</td></tr>
</table>
(Para ahorrar espacio, le di solo 3 filas de datos, obviamente, una tabla de varias páginas generalmente tendría más)
Lo primero que debemos hacer es dividir la tabla en una serie de tablas más pequeñas, cada una con su propia copia de los encabezados de las columnas. Yo llamo a estas tablas más pequeñas fauxRows .
<table> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row1</td><td>row1</td></tr>
</table>
<table> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row2</td><td>row2</td></tr>
</table>
<table> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row3</td><td>row3</td></tr>
</table>
Los fauxRows son esencialmente clones de la tabla original, pero con solo una fila de datos. (Sin embargo, si su tabla tiene una leyenda, solo la parte superior de la lista falsa debe incluirla).
A continuación, debemos hacer que los fauxRows sean irrompibles . Qué significa eso? (Preste atención: este es probablemente el concepto más importante en el manejo de las pausas de página.) "Irrompible" es el término que uso para describir un bloque de contenido que no se puede dividir entre dos páginas *. Cuando ocurre un salto de página dentro del espacio ocupado por dicho bloque, todo el bloque se mueve a la página siguiente. (Tenga en cuenta que estoy usando la palabra "bloquear" informalmente aquí, no me refiero específicamente a elementos de nivel de bloque .) Este comportamiento tiene un efecto secundario interesante que utilizaremos más adelante: puede exponer el contenido que Inicialmente se ocultó debido a capas o desbordamiento.
Podemos hacer que los fauxRows sean irrompibles mediante la aplicación de cualquiera de las siguientes declaraciones CSS:
-
page-break-inside: avoid; -
display: inline-table;
Usualmente uso ambos, porque el primero está hecho para este propósito y el segundo funciona en navegadores antiguos / no compatibles. En este caso, sin embargo, por simplicidad, me quedaré con la propiedad de salto de página. Tenga en cuenta que no verá ningún cambio en la apariencia de la tabla después de agregar esta propiedad.
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row1</td><td>row1</td></tr>
</table>
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row2</td><td>row2</td></tr>
</table>
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row3</td><td>row3</td></tr>
</table>
Ahora que las fauxRows son irrompibles, si se produce un salto de página dentro de una fila de datos, se desplazará a la página siguiente junto con su fila de encabezado adjunta. Entonces la próxima página siempre tendrá encabezados de columna en la parte superior, que es nuestro objetivo. Pero la tabla se ve muy extraña ahora con todas las filas de encabezado adicionales. Para que parezca una tabla normal otra vez, necesitamos ocultar los encabezados adicionales de tal forma que aparezcan solo cuando sea necesario.
Lo que vamos a hacer es poner cada fauxRow en un elemento contenedor con overflow: hidden; y luego muévala hacia arriba para que los encabezados se vean recortados por la parte superior del contenedor. Esto también moverá las filas de datos juntas para que parezcan contiguas.
Su primer instinto podría ser utilizar divs para los contenedores, pero en su lugar usaremos las celdas de una tabla padre. Explicaré por qué más tarde, pero por ahora, simplemente agreguemos el código. (Una vez más, esto no afectará la apariencia de la tabla).
table {
border-spacing: 0;
line-height: 20px;
}
th, td {
padding-top: 0;
padding-bottom: 0;
}
<table> <!-- parent table -->
<tr>
<td style="overflow: hidden;">
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row1</td><td>row1</td></tr>
</table>
</td>
</tr>
<tr>
<td style="overflow: hidden;">
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row2</td><td>row2</td></tr>
</table>
</td>
</tr>
<tr>
<td style="overflow: hidden;">
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row3</td><td>row3</td></tr>
</table>
</td>
</tr>
</table>
Observe el CSS sobre el marcado de la tabla. Lo agregué por dos razones: primero, evita que la tabla padre agregue espacio en blanco entre las fallas falsas; segundo, hace que la altura del encabezado sea predecible, lo cual es necesario ya que no estamos usando JavaScript para calcularlo dinámicamente.
Ahora solo tenemos que mover las fauxRows hacia arriba, lo que haremos con los márgenes negativos. Pero no es tan simple como podrías pensar Si agregamos un margen negativo directamente a una fauxRow, seguirá en vigencia cuando la fauxRow sea transferida a la página siguiente, lo que hará que los encabezados se vean recortados por la parte superior de la página. Necesitamos una manera de dejar atrás el margen negativo.
Para lograr esto, insertaremos un div vacío sobre cada fauxRow después del primero y le agregaremos el margen negativo. (El primer fauxRow se omite porque sus encabezados siempre deben estar visibles.) Como el margen está en un elemento separado, no seguirá el fauxRow a la página siguiente, y los encabezados no se recortarán. Yo llamo a estos divs vacíos headerHiders .
table {
border-spacing: 0;
line-height: 20px;
}
th, td {
padding-top: 0;
padding-bottom: 0;
}
<table> <!-- parent table -->
<tr>
<td style="overflow: hidden;">
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row1</td><td>row1</td></tr>
</table>
</td>
</tr>
<tr>
<td style="overflow: hidden;">
<div style="margin-bottom: -20px;"></div> <!-- headerHider -->
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row2</td><td>row2</td></tr>
</table>
</td>
</tr>
<tr>
<td style="overflow: hidden;">
<div style="margin-bottom: -20px;"></div> <!-- headerHider -->
<table style="page-break-inside: avoid;"> <!-- fauxRow -->
<tr><th>ColumnA</th><th>ColumnB</th></tr>
<tr><td>row3</td><td>row3</td></tr>
</table>
</td>
</tr>
</table>
Eso es todo, ¡hemos terminado! En la pantalla, la tabla ahora debería verse normal, con solo un conjunto de encabezados de columna en la parte superior. En impresión, ahora debería tener encabezados en ejecución.
Si se preguntaba por qué usamos una tabla principal en lugar de un grupo de divs de contenedor, es porque Chrome / webkit tiene un error que hace que un bloque irrompible div-closed lleve su contenedor a la página siguiente con él. Dado que headerHider también está en el contenedor, no se quedará atrás como debería, lo que lleva a encabezados recortados. Este error solo ocurre si el bloque irrompible es el elemento superior en el div con una altura distinta de cero.
Descubrí una solución mientras escribía este tutorial: solo tienes que establecer explícitamente height: 0; en el headerHider y darle un div hijo vacío con una altura no cero. Entonces puedes usar un contenedor div. Sin embargo, prefiero usar una tabla principal porque ha sido probada más a fondo, y rescata la semántica hasta cierto punto al vincular los fauxRows en una sola tabla.
EDITAR: Me acabo de dar cuenta de que el marcado generado por JavaScript es ligeramente diferente en el sentido de que pone cada fauxRow en una tabla de contenedor separada, y le asigna el nombre de clase "fauxRow" (el contenedor). Esto sería necesario para el soporte de pie de página, que tenía la intención de agregar algún día, pero nunca lo hice. Si tuviera que actualizar el JS, podría considerar cambiar a contenedores div ya que mi justificación semántica para usar una tabla no se aplica.
* Hay una situación en la que un bloque irrompible se puede dividir entre dos páginas: cuando excede la altura del área imprimible. Deberías tratar de evitar este escenario; básicamente le estás pidiendo al navegador que haga lo imposible, y puede tener efectos muy extraños en la salida.