<thead></thead>标签怎么用？

Posted 2023-04-24

参考技术A <thead> 标签定义表格的表头。该标签用于组合 html 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

以上内容参考自：http://www.w3school.com.cn/tags/tag_thead.asp

个人观点：

说白了，使用这些标签就是使表格代码结构化，让表格的代码结构更清晰，看起来一目了然。但在实际运用中，是可以省略不写的。

希望帮助到你，有疑问可以追问，尽我所能为你解答！追问

哦哦。。。谢谢。。。我再问一句，那这个可以用ul，li来代替吗？

追答

不行，ul...li是列表
而等和列表是HTML不同的两种元素。
不能混为一谈。

本回答被提问者采纳 参考技术B

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

thead、tfoot 以及 tbody 元素可以对表格中的行进行分组。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

如何避免 <thead> 和 <tbody> 之间的分页符

【中文标题】如何避免 <thead> 和 <tbody> 之间的分页符

【英文标题】：How to avoid page break between <thead> and <tbody>

【发布时间】：2017-10-24 13:58:00

【问题描述】：

我正在尝试使用一些很长的表格制作可打印的文档。有时页面在表头和数据之间结束，这使得它更难阅读。

Example

我怎样才能防止这种情况发生？

我尝试使用以下 CSS，但没有帮助。

@media print 
        h1, h2, h3, thead, thead>tr 
            page-break-after: avoid;
            page-break-inside: avoid;
        

        tbody 
            page-break-before: avoid;
        

        /* I would also like to not have page breaks within first five rows */
        tbody:nth-child(-n+5)     
            page-break-before: avoid;
        

表结构：

<table border="1" cellspacing="0" cellpadding="3">
    <thead>
    <tr>
        <th rowspan="2">Metric</th>
        <th colspan="3">Type 1</th>
        <th colspan="3">Type 2<th>
    </tr>
    <tr>
        <th>Initial</th>
        <th>Final</th>
        <th>Difference</th>
        <th>Initial</th>
        <th>Final</th>
        <th>Difference</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Dataset1</td>
        <td>*DATA*</td>
        ...
    </tr>
    </tbody>
</table>

【参考方案1】：

根据此处建议的解决方案，我找到了解决此问题的方法：How do I avoid a page break immediately after a heading

为您的表格添加一个包装器，并为其添加一个 before 伪元素。这个元素实际上不会占用任何空间（由于负边距底部），但在计算放置分页符的位置时将使用它的高度，如果它太靠近则强制浏览器将表格推送到下一页到底部。

200px 应替换为略大于表头高度 + 正文第一行高度的值。

/* This is the solution */
.wrapper::before 
    content: "";
    display: block;
    height: 200px;
    margin-bottom: -200px;
    page-break-inside: avoid;
    break-inside: avoid;


/* Table styles */
table 
    width: 100%;


thead 
    background: green;


thead tr 
    page-break-inside: avoid;
    break-inside: avoid;


tbody 
    background: yellow;


tbody tr 
    height: 80px;


td 
    height: 80px;

<div class="wrapper">
    <table>
        <thead>
            <tr>
                <td>header</td>
                <td>header</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>
</div>

【参考方案2】：

将分页符应用于tbody 上的块级伪元素，而不是直接将其应用于tbody。 这是工作Demo

您必须仔细定义页面上下文以及适当的边距和尺寸以适合您的用例。

table, th, td  border: 1px solid gray; border-collapse: collapse; 
th, td  padding: 8px; 
tbody:first-of-type  background-color: #eee; 

@page 
    size: A4;
    margin: 0;

@media print 
    html, body 
        width: 210mm;
        height: 297mm;
    
    tbody::after 
        content: ''; display: block;
        page-break-after: always;
        page-break-inside: avoid;
        page-break-before: avoid;        
    
    
  

<div> 
    <a href="#" onClick="window.print();">Print</a>
</div>
<hr />
<table>
    <thead>
		<tr>
			<th>Head 1</th>
			<th>Head 2</th>
			<th>Head 3</th>
		</tr>
    </thead>
	<tbody>
		<tr>
			<td>Row 1 Cell 1</td>
			<td>Row 1 Cell 2</td>
			<td>Row 1 Cell 3</td>
		</tr>
		<tr>
			<td>Row 2 Cell 1</td>
			<td>Row 2 Cell 2</td>
			<td>Row 2 Cell 3</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>Row 3 Cell 1</td>
			<td>Row 3 Cell 2</td>
			<td>Row 3 Cell 3</td>
		</tr>
		<tr>
			<td>Row 4 Cell 1</td>
			<td>Row 4 Cell 2</td>
			<td>Row 4 Cell 3</td>
		</tr>
	</tbody>
    <tfoot>
		<tr>
			<th>Foot 1</th>
			<th>Foot 2</th>
			<th>Foot 3</th>
		</tr>	
    </tfoot>
</table>