I have an html document in which I am testing printing a table that spans a couple of pages when printed. Unfortunately, in Firefox, the cells lose their border.
Here is my html with dummy data.
<!DOCTYPE html>
<html>
<head lang="en">
<style type="text/css" media="print">
table{
border-collapse:collapse;
}
td,th{
border:1px solid black !important;
}
</style>
</head>
<meta charset="utf-8"/>
<body>
<table>
<thead>
<tr>
<th>Title</th>
<th>Type</th>
<th>Author</th>
<th>Editor</th>
<th>Year</th>
<th>ISBN</th>
<th>Revision</th>
<th>Reviewer Score</th>
<th>Last Edited By</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
......
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</body>
</html>
It oddly works in Internet Explorer and Google Chrome. I realize that this was asked elsewhere, but sadly nothing seems to work.
On this page:
html/css: table borders appearing on screen but not in printout?
I tried a solution found in the comments using @media.
However, this doesn't work as it seems to break the css. Maybe I'm inserting this wrong?
<head>
<style>
@media.print{
table{
border-collapse:collapse;
}
td,th{
border:1px solid black !important;
}
}
</style>
</head>
I actually found a possible solution on another question asked on Stackoverflow: https://webmasters.stackexchange.com/questions/2578/how-to-prevent-table-borders-from-disappearing-while-printing
However, the top border on the headers is lost on the second and following pages. The spacing is also a bit odd and I still have to add padding to the cells.
Is there an approach that will handle printing the table with the css applied that will work across IE, Chrome, and Firefox?