我有一个表有一个 <thead>
, 一个 <tfoot>
和一个 <tbody>
.理论上它应该在每个页面上打印 thead 和 tfoot,但由于某些原因,如果它包含某些元素在一起,thead 不会。
这个有效:
<thead>
<tr>
<td colspan="3">This works</td>
<tr>
<tr>
<th colspan="2">column 1</th>
<th>
column 2
</th>
</tr>
</thead>
这似乎不起作用:
[编辑]
<table>
<thead>
<tr>
<td colspan="3">
<h2>Header</h2>
<address>
<strong>address 1</strong> <br />
address 2 <br />
address 3 <br />
</address>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Wikipedia-logo.svg/600px-Wikipedia-logo.svg.png" alt="Logo" />
<h2>Another header</h2>
<hr />
</td>
</tr>
<tr>
<th colspan="2">column 1</th>
<th>
column 2
</th>
</tr>
</thead>
<tfoot>
<tr>
<td>This is the footer</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tfoot>
<tbody>
<?php for ($i = 0; $i < 100; $i ++): ?>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<?php endfor; ?>
</tbody>
</table>
[/编辑]
它打印:
[page 1]
[header]
[body]
[footer]
[page 2,3,4,5]
[body]
[footer]
这有什么不起作用的原因吗?
最佳答案
在您的打印 CSS 中添加:
thead{
display:table-header-group;/*repeat table headers on each page*/
}
tbody{
display:table-row-group;
}
tfoot{
display:table-footer-group;/*repeat table footers on each page*/
}
根据自己的需要进行调整
更新
在获取最新的 HTML 并使用它之后,我发现每个页面上重复的内容都有高度限制。
我将 THEAD 更改为包含:
<tr><td><div style="min-height:251px;">Hello World</div></td></tr>
如果我重复 THEAD(已更改)和 TFOOT(按原样)...我只能使用高达 251px 的高度。尝试到达更高的高度会导致 THEAD 部分不重复。
关于这是一个功能还是一个错误,我将保留“争论”...但我认为,如果您有一个重复的 header 高度超过 250 像素,它可能会受益于一些收缩。 ;-)
关于html - 是否有任何 thead 限制使其无法在 Firefox 的每个页面上打印?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2493638/