HTML, CSS - Page breaks

[timsweb]

Hey,

Was wondering if there is a way to use html and css to use page breaks when printing?

For example, i have a payroll to be printed, contains 400 staff, each staff member has a table filled with theres hours etc etc, but i dont want it so there will be a table that is split over 2 pages,

How can i do this?

Cheers, Tim

[the evn show]

Assuming something like:

?
<h1>Johny McJanitor</h1>
<table summary="hours johny worked this week" class="hours">
?
</table>

<h1>Susan Q. Sciencelady</h1>
<table summary="hours that susan worked this week" class="hours">
?
</table>

h1 {
  page-break-before:always;
}

or

table.hours {
  page-break-after:always;
}

Obviously if you have a 30,000 line table there's pretty much nothing you can do to stop it from spanning several pages.

Keep in mind that this code in an @media="print" stylesheet and that cross-browser printing is a crap shoot at best. If you have a very specific layout that you need you're best served by creating a PDF server-side and sending that to the user to print. If you aren't too particular about layout then CSS can fill the job just fine.

[timsweb]

Cheers +evn

Had tried this, works really well, but, some of the tables are small and so is more than possible to fit 2, 3 or 4 tables on one page, any way to get it to only insert a page break on tables that are going to be split?

Cheers, Tim

[the evn show]

@media print {
  table {
	page-break-inside:avoid;
  }
}

The above should work but support is pretty much non-existent and unpredictable.

The only way I could see to make it work reliably would be to do something like count the number of table rows/captions/etc. figure out how many should fit on a page, and then use javascript to assign a class to tables and force a page-break where you need them.

[timsweb]

Luckily for me, this part of site is for me and few select admins, all using either latest version of firefox or internet explorer, so hopefully compatabilty should not be a problem,

Cant get your new idea to work though, here is my css code at the moment for the table:

table.payrolltables{

	page-break-after: always;
	page-break-inside:avoid;

}

But it dosent work, just provides each table on new page, Instead of just putting a page split when a table comes that will be split,

How should it be written?

Cheers, Tim

[the evn show]

  Quote

Luckily for me, this part of site is for me and few select admins, all using either latest version of firefox or internet explorer, so hopefully compatabilty should not be a problem,

When I said support was non-existent and unpredictable I meant "busted to the point of unusable". I've read that Opera supports it and that's about it.

  timsweb said:

table.payrolltables{

page-break-after: always;

}

That says "before you print this element always put a page break" so you'd drop that entirely.

  Quote

How should it be written?

table.payrolltables{
	page-break-inside: avoid;
}

[timsweb]

Hmmm,

The page-break-after: always; code works in firefox and internet explorer,

The page-break-inside: avoid; dosent work at all,

Any ideas?

Cheers, Tim

[the evn show]

That's pretty much expected: support for page-break-inside is almost non existent.

Some sort of javascript row counter that sets page breaks on your tables or just building a PDF server side is going to be the only way to accomplish this. It sucks, but that's the way CSS print support is for the time being.