Tablas y bloques que no se cortan

Una tabla que cruza páginas debe reimprimir sus encabezados de columna en cada hoja, o el lector pierde el significado de cada columna. Declara thead { display: table-header-group }; el motor de impresión clona el encabezado tras cada salto. Marca la cabecera con un <thead> real, no una <tr> suelta dentro del cuerpo.

Una fila cortada a la mitad, con su borde superior al pie de una página y sus celdas continuando en la siguiente, es ilegible. Aplica tr { break-inside: avoid } para que cada fila quede entera y el corte caiga entre filas. Deja table { break-inside: auto } para que la tabla sí pueda paginar.

Las tablas no son los únicos bloques atómicos. Figuras, ecuaciones, listados de código y callouts también se leen como una unidad y se parten mal. Aplica break-inside: avoid a figure, pre, .callout y similares para que salten enteros a la siguiente página en vez de cortarse. Úsalo solo en unidades chicas; un bloque más alto que la página igual se partirá.

Una tabla más ancha que el área viva se guillotina en el trim y pierde columnas enteras. Arréglalo antes de exportar: rota esa página a apaisado (@page landscape { size: Letter landscape }), reduce el cuerpo a 8–9pt, elimina columnas prescindibles o reestructura tablas largas en bloques clave–valor apilados. El scroll horizontal es una muleta de pantalla que no existe en papel.

Los números deben cuadrar por valor posicional para que el ojo compare magnitudes hacia abajo. Alinea las celdas numéricas a la derecha y usa font-variant-numeric: tabular-nums (o lining-nums tabular-nums) para que cada dígito ocupe el mismo ancho. Fija los decimales a un número constante para que la coma o el punto se apilen. El texto va a la izquierda; nunca centres números.

Una rejilla completa de filetes gruesos enmarca cada celda y compite con los datos. Usa un solo hairline (0.5pt) bajo cada fila, o una cebra tenue en filas alternas, y elimina casi todos los filetes verticales. Deja que la alineación numérica y el aire hagan la separación. Reserva los filetes fuertes para el subrayado del encabezado y la línea de totales.

Totales, unidades y notas al pie pertenecen a la tabla y no deben quedar solos en la página siguiente. Pon la fila de totales en un <tfoot> real con display: table-footer-group para que se reimprima y quede anclada. Envuelve la tabla junto a su pie y notas en un figure con break-inside: avoid cuando quepa en una página.

Las celdas apretadas hacen la tabla difícil de escanear y fácil de leer mal entre filas. Da a cada celda un padding generoso, aproximadamente 6–10px vertical y 8–12px horizontal a cuerpo de texto, y mantén cómoda la altura de fila. Más aire separa mejor que más filetes. Si falta espacio, quita columnas antes que padding.

Algunas tablas de verdad ocupan varias páginas, y está bien: la meta es un corte limpio entre filas enteras con el encabezado repetido, no forzar la tabla a una sola página. Combina thead { display: table-header-group }, tr { break-inside: avoid } y table { break-inside: auto }. No envuelvas una tabla multipágina en break-inside: avoid o el motor la apretuja y desborda.

Filas críticas como totales o una línea resumen pierden sentido si quedan solas, separadas de los datos que suman. Mantén la fila de totales agrupada con al menos las últimas filas de datos usando un envoltorio con break-inside: avoid, o empuja todo el bloque resumen a la siguiente página con break-before: avoid en el total. El lector siempre debe ver los totales junto a sus filas de origen.

Los rowspan profundos y los colspan anidados confunden al motor de fragmentación: una celda que abarca muchas filas puede forzar un corte feo o desbordar, y los lectores de pantalla pierden la asociación de encabezado. Prefiere una rejilla plana donde cada celda tenga un valor; repite la etiqueta en cada fila en vez de fusionar hacia abajo. Si debes agrupar, usa una fila de subtítulo en lugar de una celda alta combinada.