CODEWITHSUNDEEP
cssprinting
Raymond Feliciano
Raymond Feliciano

Reputation: 189

printing webpages

I have a webpage that contains a table which is dynamically populated. This page needs to be printed out for records. The problem I am having is avoiding page breaks inside a tr. I spent many hours googleing and trying many things and all I been able to produce is a page which does not break in the correct place so some data is missing. I have a small simple print css page

.noprint{
display: none;
}
.printthis { 
display: block; 
} 
.data table{ 
page-break-inside:avoid;
}
.data tr{
page-break-inside:avoid;
}
.data thead{
display:table-header-group;
}
.data tbody{
display:table-body-group;
page-break-inside:avoid;
}
.data,
.data th,
.data td {
border:1px solid #000;
border-spacing:0;   
border-collapse:collapse; 
}
.data table,th, tbody, tr, td {
background-color:transparent;
padding: 0px;
margin: 0px;
}
a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
text-decoration: none;
font-size: 90%;
display: none;
}
a[href^="/"]:after {
text-decoration: none;
display: none;
}

I am only trying to print out the results in this table which I have done I just need a little help getting it to break in the correct place. Any hlep is appreciated

Upvotes: 0

Views: 308

Answers (2)

tBone77
tBone77

Reputation: 149

Are rows being split in all browsers?

I was having similar issues: 

tr {page-break-inside:avoid;}

worked for me, but you appear to have this already.
Maybe your css rule is not covering the rows, try using the developer toolbar in your chosen browser to inspect the applied css rules of the table rows.

As for printing table headers at the top of each page, it looks like IE is the only browser at the moment that supports this.
web-kit based browsers don't support it at the moment:
Bug 17205 - THEAD & TFOOT should be printed on every page

Upvotes: 1

Hussain Akhtar Wahid 'Ghouri'
Hussain Akhtar Wahid 'Ghouri'

Reputation: 6617

try insertin a css with an extra attribute

media=print

<link type="stylesheet" href="../css path" media="print">

now while use the option 

window.print()

only this css will be activated and your print page will have this css applied

Upvotes: 1

Related Questions