Keep-with-next when printing HTML tables? | Tech Off

theogray_com
Madness is all in the mind

Does anyone know of a way to stop a HTML table row splitting over a page break when printing from within IE.

Currently the page only needs to work in IE6, but cross-browser support in future would be nice too.

Mike Dimmick

Try the page-break-after attribute. I'm not sure how well it works - I know a colleague of mine used it on a project about 18 months ago but can't recall whether he was trying to force or prevent a page break.

Maurits
AKA Matthew van Eerde

The CSS2-friendly way to do it would be
td { page-break-inside: avoid; }

see the page-break-inside definition

Not sure if it works in IE (or anything else, for that matter)

EDIT: td, not tr - td is a block-level element, tr is not.
EDIT2: works in Firefox, not in IE (more food for the wiki...)
EDIT3: Added request to wiki

theogray_com
Madness is all in the mind

Thanks Maurits, I was hoping it would be as simple as a CSS property.

Maurits wrote:
EDIT2: works in Firefox, not in IE (more food for the wiki...)

Not sure the client will be quite ready to start using Firefox, but I'll mention it anyways. At least when Microsoft get CSS2 implemented completely the page will be ready for it.

Does anyone know a way to get IE6 to replicate this behaviour?

kmbarr

theogray_com wrote:

Does anyone know a way to get IE6 to replicate this behaviour?

I would really like to be able to do this as well. About the closest I've come to doing this in Internet explorer is by setting a style on the TR element of the table like:

page-break-after: expression(this.rowIndex%23==0?'always':'');

Which causes a forced page break every 23rd row in this case, although that's easily changed to something else. The problem is, depending on page margins and set-up, this might not be right, and if the table cells contain variable-length information this method will not work at all. I've tried surrounding the contents with SPAN, DIV, TABLE, or including an IMG sized vertically to fill the cell, but IE is happy to split them all in half. This causes some real problematic splits in some web based forms and reports I've developed. If anyone has found something that works, please post it here.

W3bbo
The Master of Baiters

Maurits wrote:

EDIT: td, not tr - td is a block-level element, tr is not.
EDIT2: works in Firefox, not in IE (more food for the wiki...)
EDIT3: Added request to wiki

TD isn't a block-level element.

IE handles <td>, and <tr> elements differently to the "generic HTML element" box. Virtually all other rendering engines have:

td { display: table-cell; }
tr { display: table-row; }

table-cell differs from block in that it "fills" the region, which makes it an invaluable CSS property for innovative designs, and it's a shame it isn't supported by IE6.

Harlequin
Don't touch that mustard. It's Jerry and Bills.

Is that expression function part of the CSS spec? I love using it for calculating page sizes, thus you can have nice scrollable divs which change size dynamically, like this:

.mydiv{height:expression(document.body.clientHeight - 300);}

Cool

W3bbo
The Master of Baiters

Harlequin wrote:

Is that expression function part of the CSS spec? I love using it for calculating page sizes, thus you can have nice scrollable divs which change size dynamically, like this:

.mydiv{height:expression(document.body.clientHeight - 300);}

expression() is an MS proposed CSS extension, it was rejected by the W3C, I think it was because it was too tied-in with JScript (rather than being scripting-language agnostic/neutral).