Question

我无法在CSS表格中打印“页眉”，但它与“页脚”的效果很好。

这是HTML表内容的代码。直到第4页。但是由于单词limit post的限制，我无法编写完整的代码。所以我删除了主要包含行数据的男孩。

<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>

Answer 1

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

<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>

在CSS的每个页面中发布“标题”时出现问题

1 个答案: