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
spen_langAsked:
Who is Participating?
 
BlueYonderConnect With a Mentor Commented:
0
 
BlueYonderCommented:
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.
0
 
spen_langAuthor Commented:
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...
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
BlueYonderCommented:
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>
0
 
spen_langAuthor Commented:
Thanks but "page-break-inside:avoid" is only supported by Opera and not any other browser, do you have any other ideas?
0
 
BlueYonderCommented:
CSS is somewhat of a headache, because at times the CSS needs to be written for multiple browsers.
0
 
spen_langAuthor Commented:
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...
0
 
spen_langAuthor Commented:
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?
0
 
BlueYonderCommented:
Need to add
#table1{ page-break-inside:auto }
0
 
spen_langAuthor Commented:
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...
0
 
spen_langAuthor Commented:
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.
0
 
BlueYonderCommented:
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.
0
 
spen_langAuthor Commented:
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?
0
 
BlueYonderCommented:
Update with
#table1{ page-break-inside:auto; border:1; }
0
 
spen_langAuthor Commented:
Unfortunately that did not resolve the issue, there the top border is still missing on each page...
0
 
BlueYonderCommented:
thead {display:table-header-group; border:2px; border-style:solid;}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.