Cookie Notice

As far as I know, and as far as I remember, nothing in this page does anything with Cookies.

2011/04/05

CSS Table Printing Problem

So, I have a page that holds lots of tables. These tables are all the schema for a database I use for a project. All 31 of them. The page is basically the DESCRIBE table for each table. We're talking usually about 4-8 rows per table. A main reason for creating this page is so we can have the schema taped to the wall.

The problem gets to be that of widows and orphans. In layout, a widow is the last line of a paragraph occurring after a page break, while an orphan is a first line of a paragraph occurring before a page break Or, in this case, tables. And it is considered to be bad.

A widowed row.
Using THEAD and TBODY allows the browser (in this case, Firefox on Linux) to repeat the head of the table, which is nice, but one row of the table isn't enough.

Clearly, these are short enough that forcing the browser to keep the table together through a page break shouldn't be too wasteful, unlike if this was a SELECT * FROM table on a table with hundreds or thousands of rows. But it seems this isn't possible with CSS. CSS has page-break-before,  page-break-after and  page-break-inside, but they are insufficient. You can force a page break before or after an element, but that's not it. If you can fit seven or eight tables on a page, why would you not put them on a page? And there's three options for  page-break-inside: avoid, auto and inherit. The choice of auto translates to "break it anywhere", while avoid has all the practical use of "break it anywhere" and inherit simply means "do what the parent did", which of course means "break it anywhere".

There are CSS properties for widows and orphans, but they don't seem to work for tables. Well, less with tables than tables wrapped in DIVs.