Question

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

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

Answer 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 ;
}

Answer 2

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

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

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

2 个答案: