Link to home
Start Free TrialLog in
Avatar of spen_lang
spen_lang

asked on

HTML Table across more than one page

Hi,

I have created a HTML file that consists of a table. When the file is printed the table spans across more than  one page. However, the table rows are occasionally split between two page breaks making the table row unreadable.

Is there a way to prevent the table rows splitting between page breaks?

Thanks, Greg
Avatar of BlueYonder
BlueYonder

You will need to adjust the size of the table or print in landscape.  Here is a guidance on using CSS for printing, http://css-discuss.incutio.com/wiki/Print_Stylesheets.
Avatar of spen_lang

ASKER

It is the rows that are split across two pages, the columns fit on the portrait page OK. Basically, when printed due to the vast amount of rows, the table prints over 3 pages...
Here's what you can use for rows.  
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>
Thanks but "page-break-inside:avoid" is only supported by Opera and not any other browser, do you have any other ideas?
ASKER CERTIFIED SOLUTION
Avatar of BlueYonder
BlueYonder

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
CSS is somewhat of a headache, because at times the CSS needs to be written for multiple browsers.
Sorry but I am a little confused. At the top of my html file I have
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Open in new window



I have previously tried to use the following CSS
@media print {
	#table1 thead {display:table-header-group;}
	#table1 tr.altGrey {page-break-inside:avoid;page-break-before:never;}
	#table1 tr.altWhite {page-break-inside:avoid;page-break-before:never;}
	#table1 td {font-size:10pt;}
	#table1 th {font-size:11pt;}
   	p.para1 {font-size:10pt;display:none;}
	p.para2 {display:none;}
	p.header {font-size:18pt;}
}

Open in new window


But this did not work...
So now at the top of the html file I now have

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />

Open in new window


Is this correct/OK?
Need to add
#table1{ page-break-inside:auto }
OK, so that is now working,but now on the second page the table header border at the top is now missing...

Also is it possible to put a bottom border at the end of each page?

Sorry to ask even more questions...
Also the "tfoot" appears on all pages, I only wan the "tfoot" to appear on the final page and for the "thead" to appear on each page.
Unfortunately for the header and footer, they appear on every page, since they are supposed to appear at the top and bottom of the table.
OK, this makes sense, I was not thinking correctly, I have now resolved this by setting the <tfoot> as nothing and adding the footer to the end of <tbody>.

Do you know why the table border is not printing at the top of each page?
Update with
#table1{ page-break-inside:auto; border:1; }
Unfortunately that did not resolve the issue, there the top border is still missing on each page...
thead {display:table-header-group; border:2px; border-style:solid;}