媒体打印多页表格-边框-布局答案

【问题标题】：Media print multiple pages table-border-layout媒体打印多页表格-边框-布局
【发布时间】：2021-04-19 21:10:38
【问题描述】：

当我打印这个时，第二页表格的左侧和顶部缺少边框。我该如何解决这个问题？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        @media print
        {
            body { 
                margin: 0; 
                padding: 0;
                color: #000000 !important;
                background-color: #ffffff !important;
            }
            * {
                color: inherit !important; 
                background-color: transparent !important;
                background-image: none !important;
            }
            table {
                width: 100%;
                border: 1pt solid #000000;
                border-collapse: collapse;
                font-size: 11pt;
            }
            #space { height: 750px; }
        }
    </style>
</head>
<body>
    <br /><br />
    <h2>.</h2>
    <div id="space"></div>
    <table border="1">
        <thead>
            <tr><th>Amount</th><th>label</th></tr>
        </thead>
        <tbody>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
            <tr><td>20</td><td>pineapple</td></tr>
        </tbody>
    </table>
</body>
</html>

【问题讨论】：

你的浏览器是什么？适用于FF6。如果您生成 pdf，请确保缩放良好并且不是缩放渲染问题...
FF6.如果我生成一个 pdf，它看起来会好一些，但还不是很好：有左边框和上边框，但它们比其他边框更薄。

标签： html css html-table media-queries

【解决方案1】：

改变你的表格样式，让它看起来不错：

table {
    border: 1pt solid #000000;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11pt;
    width: 100%;
}

编辑： 为了让某些东西看起来很完美，首先，删除所有表格边框，然后用你想要的定义每种样式，以便只有一行边框（为 th、td、tr 创建边框）：

table {
    border-collapse: separate;
    border: 0px solid #000000;
    border-spacing: 0;
    font-size: 11pt;
    width: 100%;
    border-color: #000000 ;
    border-right: 1px solid;
}

tr {
    border-color: #000000;
    border-style: none;
    border-width: 0;
}

td {
    border-color: #000000;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

th {
    border-color: #000000;
    border-left: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
}

【讨论】：

看起来更好，但还不够好。第一个页面底部边框和第二个页面顶部边框的厚度只有其余边框的一半。
如果我明确设置为none 所有不需要的边框都可以。
为了很好地打印边框非常麻烦，促使我设计没有边框的表格。实际上，没有表格的边框看起来更好。在这个 SO 网站上，我看到很多表格，但没有边界。当然，这并没有直接解决 OP 的问题，并且是有意见的，但我只想分享我的学习曲线，因为我在考虑到同样的问题的情况下得出了这个解决方案。

【解决方案2】：

将表格边框宽度的边距留给表格，以防止表格有折叠边框时在第二页和后面的页面上剪裁。

<table style="border:1px solid black; margin:1px;">
    <thead>
       <tr><th>Amount</th><th>label</th></tr>
    </thead>
    ....

【讨论】：