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
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
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.
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>
<!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>
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
CSS is somewhat of a headache, because at times the CSS needs to be written for multiple browsers.
ASKER
Sorry but I am a little confused. At the top of my html file I have
I have previously tried to use the following CSS
But this did not work...
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
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;}
}
But this did not work...
ASKER
So now at the top of the html file I now have
Is this correct/OK?
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Is this correct/OK?
Need to add
#table1{ page-break-inside:auto }
#table1{ page-break-inside:auto }
ASKER
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 is it possible to put a bottom border at the end of each page?
Sorry to ask even more questions...
ASKER
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.
ASKER
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?
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; }
#table1{ page-break-inside:auto; border:1; }
ASKER
Unfortunately that did not resolve the issue, there the top border is still missing on each page...
thead {display:table-header-grou p; border:2px; border-style:solid;}