打印表格显示文本页眉和页脚答案

【问题标题】：Print table display text header and footer打印表格显示文本页眉和页脚
【发布时间】：2020-10-02 05:49:10
【问题描述】：

当我在 html 上打印数据表时，我遇到了如何添加文本页眉和页脚的问题。我已经在标题上有标题，但似乎我模板上的默认 javascript 识别了我的 html 中的

<p><a href="/default/index/tourl?u=aHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9VWTgyUi5qcGc%3D" rel="nofollow" target="_blank"></a></p> <blockquote> <p>整个 HTML</p> </blockquote> <pre><code><html> <head> <title></title> <style> @media screen { .noPrint{} .titles{display:none;} .footer{display:none;} } @media print { .noPrint{display:none;} .title{} .footer{} } </style> </head> <body> <button onclick="printDiv();">Print it</button> <table class="report-container" name="table" id="table" > <thead class="report-header"> <th colspan="9"><div class="titles">Title Header <br></div></th> <tr> <td>ID Number</td> <td>Name</td> <td>Barangay</td> <td>Sex</td> <td>Sector</td> <td>Amount</td> <td>Signature/thumb</td> <td>ID   </td> <td>Date Received</td> </tr> </thead> <tfoot> <tr> <td colspan=9><div class="footer">Title Footer</div></td> </tr> </tfoot> <tbody class="report-content"> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td class="report-content-cell"> <div class="main">fas</div> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </tbody> </table> </body> <script ="text/javascript"> function printDiv() { var divToPrint = document.getElementById('table'); var htmlToPrint = '' + '<style type="text/css">' + 'table td {' + 'border:1px solid #dddddd;' + 'padding:8px;' + '}' + 'table {' + 'border-collapse: collapse;' + 'width: 100%;' + '}' + '</style>'; htmlToPrint += divToPrint.outerHTML; newWin = window.open(""); newWin.document.write(htmlToPrint); newWin.print(); newWin.close(); } </script> </code></pre>

【问题讨论】：

按照设计，table 对象的thead 和tfoot 部分应在表格出现的每一页上打印出来。看起来您已经有一个 thead 部分来显示列标题。您可以在其上方添加tr 行，并使用colspan 用一个th 标记覆盖所有列 - 这将包含您的标题。
@ATD 感谢您的回复，我在上面添加了表格，但您能帮我在哪里添加 colspan 吗？在 tr 上？谢谢

标签： javascript html css printing

【解决方案1】：

如果没有样式，我看不出它是否完全符合您想要实现的目标，但您可以稍后检查样式。

thead 标签的基本结构应该是这样的：

<thead>
  <tr>
    <th colspan=9>This should display on print</th>
  </tr>
  <tr>
    <th>ID Number</th>
    <th>Name</th>
    <th>Barangay</th>
    <th>Sex</th>
    <th>Sector</th>
    <th>Amount</th>
    <th>Signature/thumb</th>
    <th >ID &nbsp;&nbsp;</th>
    <th>Date Received</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td colspan=9>Text for the footer goes here</td>
  </tr>
</tfoot>

在您的表格中，您有 9 列，因此标题 th 标记需要跨越所有 9 列。这是通过将 colspan=9 添加到 th 元素本身来完成的。

页脚应该以类似的方式添加。请注意，tfoot 必须紧跟在 thead 之后和任何 tbody 标记之前

（更新为包括tfoot）

【讨论】：

好主意，我已经用过了，但是你知道为什么标题页眉和页脚在打印时在每一页上不断重复我只想在页面顶部显示标题并在页脚显示页脚打印页的结尾。感谢您的回复，请在小提琴jsfiddle.net/k9svqa43/#&togetherjs=o1FFJ8tVzS 中查看我的更新代码
我无法使用该功能进行打印。我已将代码复制到一个新的 HTML 文件中，并且该文件的打印预览符合我的预期。标题打印在第一页的表格顶部和出现在第二页的表格部分的顶部。页脚出现在第一页表格的底部和第二页表格的末尾。您不想打印哪个位？
感谢您的回复我已经更新了我上面的 html ，我想打印我的表格的所有数据，但我想在我的第一页顶部打印页眉标题以及页脚打印只在最后一页。目前我的代码在打印时显示每个页面的页眉和页脚
但是，您希望页眉在每一页上重复吗？
感谢您的回复，不，我只想在首页打印页眉，页脚仅打印最后一页，请帮助