【发布时间】:2017-09-19 17:25:52
【问题描述】:
我有一个 html 文档,我在其中测试打印一个表格,该表格在打印时跨越几页。不幸的是,在 Firefox 中,单元格失去了边框。
这是我的带有虚拟数据的 html。
<!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>
奇怪的是,它在 Internet Explorer 和 Google Chrome 中运行。 我意识到这是在其他地方问过的,但遗憾的是似乎没有任何效果。
在这个页面上:
html/css: table borders appearing on screen but not in printout?
我尝试了使用@media 在 cmets 中找到的解决方案。
但是,这不起作用,因为它似乎破坏了 css。也许我插入错了?
<head>
<style>
@media.print{
table{
border-collapse:collapse;
}
td,th{
border:1px solid black !important;
}
}
</style>
</head>
我实际上在 Stackoverflow 上提出的另一个问题上找到了可能的解决方案: https://webmasters.stackexchange.com/questions/2578/how-to-prevent-table-borders-from-disappearing-while-printing
但是,页眉的顶部边框在第二页和后续页中丢失。间距也有点奇怪,我仍然需要为单元格添加填充。
是否有一种方法可以处理打印应用了 css 的表格,该方法适用于 IE、Chrome 和 Firefox?
【问题讨论】: