页面打印table表格分页问题

最新推荐文章于 2023-09-08 16:27:15 发布

原创最新推荐文章于 2023-09-08 16:27:15 发布 · 528 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #js

文章介绍了如何使用CSS属性`table-header-group`保持表格头在分页后依然显示，以及利用`page-break-before`控制表格在分页时的部分换行，确保页面布局的合理性。

分页时表格标题（表头）显示

一、分页后依旧显示表格头

关键：table-header-group

<thead style="display:table-header-group;font-weight:bold">
	<tr>
		<td colspan="1">ID</td>
		<td colspan="1">名字</td>
		<td colspan="1">年龄</td>
	</tr>
</thead>
<tr>
	<td colspan="1">1</td>
	<td colspan="1">爱坤</td>
	<td colspan="1">18</td>
</tr>
<tr>
	//...
</tr>

效果
在这里插入图片描述

二、分页时表格部分换行

关键：page-break-before:auto
注：除了auto外还有always、left和right

<thead style="page-break-before:auto">
	<tr>
		<td colspan="1">ID</td>
		<td colspan="1">名字</td>
		<td colspan="1">年龄</td>
	</tr>
</thead>
<tr>
	<td colspan="1">1</td>
	<td colspan="1">爱坤</td>
	<td colspan="1">18</td>
</tr>
<tr>
	//...
</tr>