table thead tfoot 分页，每页显示表头表尾

最新推荐文章于 2023-07-18 20:46:49 发布

原创最新推荐文章于 2023-07-18 20:46:49 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个使用CSS和HTML制作的A4尺寸的验收单模板，包含表头、主体表格、页眉和页脚的设计。重点展示了如何设置页面大小、边距和元素定位，以及表格样式和内容布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test-page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>验收单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: SimHei;
            width: 100%;
            height: 100%;
            font-size: 10pt; /* 字体大小单位用 pt */
        }
        @page {
            size: 210mm 297mm; /*A4大小*/
            margin: 20px; /* 这里的margin太小了，底部的page看不到， margin border width单位用 px */

            @top-right {
                content: element(header-right)
            };
            @bottom-center {
                content: element(footer)
            }
        }
        #footer {
            position: running(footer);
        }
        #pages:before {
            content: counter(page);
        }
        #pages:after {
            content: counter(pages);
        }
        table {
            border-spacing: 0; /*去掉单元格间隙*/
            border-collapse: collapse; /*边框会合并为一个单一的边框*/
        }
        tr td {
            text-align:center;
            white-space:pre-line;
            word-wrap:break-word; /*内容居中自动换行*/
            word-break:break-all;
        }
        .tdBorder {
            border: 1px solid #999;
        }
    </style>
</head>
<body>
<table border="0" width="100%" align="center">
    <thead style="display:table-header-group;font-weight:bold">
        <tr><td colspan="2" align="center" style="font-size:14pt;">每页都有的表头</td></tr>
    </thead>
    <tbody>
        <tr>
            <td class="tdBorder" width="100px">表格内容</td>
            <td class="tdBorder" width="100px">表格1234567890asdfghjklzxcvbnm1234567890asdfghjklzxcvbnm
                内容</td>
        </tr>
        <tr>
            <td class="tdBorder" width="100px">表格1234567890asdfghjklzxcvbnm1234567890asdfghjklzxcvbnm阿布当初</td>
            <td class="tdBorder" width="100px">表格内容</td>
        </tr>
        <tr>
            <td class="tdBorder" width="100px">表格内容</td>
            <td class="tdBorder" width="100px">表格内容</td>
        </tr>
        <tr>
            <td class="tdBorder" width="100px">表格内容</td>
            <td class="tdBorder" width="100px">表格内容</td>
        </tr>
        <tr>
            <td class="tdBorder" width="100px">表格内容</td>
            <td class="tdBorder" width="100px">表格内容</td>
        </tr>
    <footer>我是尾巴。。。。。。。。。</footer>
    </tbody>
    <tfoot style="display:table-footer-group;font-weight:bold">
        <tr>
            <td colspan="2" align="center" style="font-weight:bold;">每页都有的表尾</td>
        </tr>
    </tfoot>
</table>
<div id="footer">
    <div style="text-align: center; width: 100%;">Page
        <span id="pages"> of </span></div>
</div>
<footer>我是尾巴。。。。。。。。。</footer>
</body>
</html>