gpt4 book ai didi

html - CSS中每个页面发布 "Header"的问题

转载 作者:行者123 更新时间:2023-11-27 23:57:50 25 4
gpt4 key购买 nike

我没有在我的 CSS 表格中打印“页眉”,而它与“页脚”配合使用时效果很好。

这是 HTML 表格内容的代码。它一直到第 4 页。但是由于字数限制帖子限制我编写完整的代码。所以我删除了主要包含行数据的男孩。

<html>
<head>
<title>DEMO TABLE</title>
<meta charset="utf-8">
<style type="text/css">
@media print {
a[href]:after {content: none !important;
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tr { page-break-inside: avoid; }
.page {
page-break-after: always;
}
</style>
</head>
<body>
<h3>Heading Comes Here</h3>
<table border="1" style=”width: 100%”>
<!--<caption>TABLE HEADER</caption>-->
<div class="page-footer-space">PAGE HEADER</div>
<colgroup>
<col style="width: 20%" />
<col style="width: 40%" />
<col style="width: 40%" />
</colgroup>
<thead>
<tr>
<th rowspan="1">AUTOMATION</th>
<th rowspan="1">MANUAL</th>
<th rowspan="1">HYBRID</th>
</tr>
<tr>
<!--<th>NEW COL ONE</th>-->
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">TABLE FOOTER</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>FILE 1</th>
<td>FILE 1 COL 1</td>
<td>FILE 1 COL 2</td>
</tr>
<tr>
<th>FILE 1</th>
<td>FILE 1 COL 1</td>
<td>FILE 1 COL 2</td>
</tr>
<tr>
<th>FILE 2</th>
<td>FILE 2 COL 1</td>
<td>FILE 2 COL 2</td>
</tr>
<!--Like so-->
</tbody>
</table>
</body>
</html>

最佳答案

这是您需要的吗?我已将表头更改为

<thead>
<tr ><th colspan="3">PAGE HEADER</th></tr>
<tr>
<th rowspan="1">AUTOMATION</th>
<th rowspan="1">MANUAL</th>
<th rowspan="1">HYBRID</th>
</tr>
<tr>
<!--<th>NEW COL ONE</th>-->
</tr>
</thead>

你可以在 jsfiddle 上试试这个

<html>
<head>
<title>DEMO TABLE</title>
<meta charset="utf-8">
<style type="text/css">
@media print {
a[href]:after {content: none !important;
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tr { page-break-inside: avoid; }
.page {
page-break-after: always;
}
</style>
</head>
<body>
<h3>Heading Comes Here</h3>
<table border="1" style=”width: 100%”>
<!--<caption>TABLE HEADER</caption>-->
<colgroup>
<col style="width: 20%" />
<col style="width: 40%" />
<col style="width: 40%" />
</colgroup>
<thead>
<tr ><th colspan="3">PAGE HEADER</th></tr>
<tr>
<th rowspan="1">AUTOMATION</th>
<th rowspan="1">MANUAL</th>
<th rowspan="1">HYBRID</th>
</tr>
<tr>
<!--<th>NEW COL ONE</th>-->
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">TABLE FOOTER</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>FILE 1</th>
<td>FILE 1 COL 1</td>
<td>FILE 1 COL 2</td>
</tr>
<tr>
<th>FILE 1</th>
<td>FILE 1 COL 1</td>
<td>FILE 1 COL 2</td>
</tr>
<tr>
<th>FILE 2</th>
<td>FILE 2 COL 1</td>
<td>FILE 2 COL 2</td>
</tr>
<!--Like so-->
</tbody>
</table>
</body>
</html>

关于html - CSS中每个页面发布 "Header"的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56166670/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com