0

Can you use Javascript to do the following pseudocode? (in a browser) explanation of below code: similar to word processor behavior, it will take a long table that overflows a page break and split the cells so that there is no graphical breakage, and repeat the header row on the next page if the table has a header row (or multiple header rows).

Example of problem:

if printing page to pdf
{
 if table is overflowing a page break
 {
  if table has header row
   {
   split table so that rows print without breaking and repeat header row on next page
   }
  else if table does not have header row
   {
   split table so that rows print without breaking
   }
 }
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Gallaxhar
  • 976
  • 1
  • 15
  • 28
  • In a browser? (I ask because of the "if printing to pdf" bit; Adobe uses JavaScript embedded in PDFs for various things.) – T.J. Crowder Aug 18 '14 at 23:05
  • You shouldn't be using Javascript to generate the PDF as it can't. Also you need to take into account the text sizes, what font is being used etc. There are plenty of server-side routines that will generate a pdf file from a server-side generated table or html. –  Aug 18 '14 at 23:06
  • @jeff: *"You shouldn't be using Javascript to generate the PDF as it can't."* Sure it can: http://parall.ax/products/jspdf ;-) – T.J. Crowder Aug 18 '14 at 23:15
  • 1
    @T.J.Crowder - didn't now about that - thanks for the info. –  Aug 18 '14 at 23:19
  • CSS's page-break-before comes to mind. you could combine with nth-child to paginate the rows into pages – dandavis Aug 19 '14 at 00:09

1 Answers1

0

You don't need to use JavaScript to do it: Instead, use thead elements to contain your table headers, and tbody elements to contain your table data. It's the browser's responsibility to repeat the table headers after page breaks.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • that's awesome if it works, but does the browser actually do this? any examples? everywhere i've printed from in firefox/chrome/ie, the table rows break – Gallaxhar Aug 18 '14 at 23:07
  • @Gallaxhar: Firefox does, IE9+ does, shockingly it doesn't look like Chrome does (grrr), not even with [this hint](http://stackoverflow.com/questions/274149/css-repeat-table-headers-in-print-mode). My test page: http://jsbin.com/dekehe/1 In my view, that's the user's/browser vendor's problem, not yours. :-) There's an [open Chrome bug](https://code.google.com/p/chromium/issues/detail?id=24826), and a [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=17205). – T.J. Crowder Aug 18 '14 at 23:12
  • try it with a graphical border on the tables, and you will see it doesnt work in FF or IE either, unless it happens by chance luck – Gallaxhar Aug 18 '14 at 23:15
  • @Gallaxhar: Yeah, browsers are pretty awkward about what aspects of visual elements they do and don't print (backgrounds, some borders, etc.). – T.J. Crowder Aug 18 '14 at 23:17