[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

HTML Table across more than one page

Posted on 2012-08-22
16
Medium Priority
?
376 Views
Last Modified: 2012-08-28
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
0
Comment
Question by:spen_lang
  • 8
  • 8
16 Comments
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38319895
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
 

Author Comment

by:spen_lang
ID: 38319976
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
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38320009
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:spen_lang
ID: 38320015
Thanks but "page-break-inside:avoid" is only supported by Opera and not any other browser, do you have any other ideas?
0
 
LVL 9

Accepted Solution

by:
BlueYonder earned 2000 total points
ID: 38320027
0
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38320032
CSS is somewhat of a headache, because at times the CSS needs to be written for multiple browsers.
0
 

Author Comment

by:spen_lang
ID: 38320099
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
 

Author Comment

by:spen_lang
ID: 38320137
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
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38320149
Need to add
#table1{ page-break-inside:auto }
0
 

Author Comment

by:spen_lang
ID: 38320174
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
 

Author Comment

by:spen_lang
ID: 38320182
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
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38320204
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
 

Author Comment

by:spen_lang
ID: 38320226
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
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38320260
Update with
#table1{ page-break-inside:auto; border:1; }
0
 

Author Comment

by:spen_lang
ID: 38320353
Unfortunately that did not resolve the issue, there the top border is still missing on each page...
0
 
LVL 9

Expert Comment

by:BlueYonder
ID: 38320449
thead {display:table-header-group; border:2px; border-style:solid;}
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question