在后续页面中打印表格标题答案

【问题标题】：Print table header in subsequent pages在后续页面中打印表格标题
【发布时间】：2011-06-22 22:27:38
【问题描述】：

我正在尝试在使用浏览器打印功能时在后续页面中显示表格标题。使用 Firefox 我只能在第一页显示标题。标头由标签定义。代码如下：

<html>
<head> 
    <style type="text/css">
        @media print
        {           
            thead
            {
                display:  table-header-group;    
            }
        }
    </style>
</head>
<body>      
    <table>
        <thead>
            <tr><td>header1</td></tr>
            <tr><td>header2</td></tr>
            <tr><td>header3</td></tr>
            <tr><td>header4</td></tr>
            <tr><td>header5</td></tr>
            <tr><td>header6</td></tr>
            <tr><td>header7</td></tr>
            <tr><td>header8</td></tr>
            <tr><td>header9</td></tr>
            <tr><td>header10</td></tr>
            <tr><td>header11</td></tr>  
            <tr><td>header12</td></tr>
            <tr><td>header13</td></tr>                  
        </thead>
        <tbody>
            <tr><td>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
            Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>          
            </td></tr>
        </tbody>
    <table>

</body>

使用打印预览来测试我的描述。如果去掉下面这行代码

<tr><td>header13</td></tr>

标题出现在我想要的所有页面中。如何解决这个问题？这似乎是表头最大高度的问题。

【问题讨论】：

标签： html css printing

【解决方案1】：

尝试在单元格的表格标题中使用<th> 而不是<td>。浏览器应该自动在每一页上打印这些标题。另外，请确保每个<tbody> 行中的单元格数等于标题中的单元格数。

【讨论】：

我试试你说的，但不幸的是不起作用。请尝试我的示例，看看它不起作用，然后删除“header 13”行。然后行为是预期的。我猜这是thead标签的最大高度问题

【解决方案2】：

不知道为什么您的 thead 上有太多行。下面的代码运行良好（在 Firefox 上测试）。我还测试了 20 个表头，仍然运行良好。

<html>
<head>
    <style type="text/css">
        @media print {
            thead
            {
                display:  table-header-group;
            }
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>header1</th>
                <th>header2</th>
                <th>header3</th>
                <th>header4</th>
                <th>header5</th>
                <th>header6</th>
                <th>header7</th>
                <th>header8</th>
                <th>header9</th>
                <th>header10</th>
                <th>header11</th>
                <th>header12</th>
                <th>header13</th>
            </tr>            
        </thead>
        <tbody>
            <tr>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
            </tr>
            <!--
                Code is too long to paste.
                If you're using emmet/zencoding, try to expand
                the code below to print 1000 rows

                (tr>(td{text})*13)*1000
            -->
        </tbody>
    <table>
</body>

【讨论】：

这是 1 行还是 13 行？