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

Question

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

sid*_*com 7 html css html-table media-queries

当我打印这个时,在第二页的表格左侧和顶部缺少边框.我怎样才能解决这个问题？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jea*_*les 5

更改表格样式以使某些内容看起来很好:

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

Run Code Online (Sandbox Code Playgroud)

编辑: 要使某些内容看起来很完美,首先,删除所有表格边框,然后使用您想要的内容定义每个样式,以便只有一行边框(为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 ;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	7336 次
最近记录：	8 年，6 月前