打印表格，保证tr中间不分页

参考： https://cdc.tencent.com/2014/08/19/print-%E8%A2%AB%E5%9F%8B%E6%B2%A1%E7%9A%84media-type/

整体思路：设置tr内部不分页，给td设置右下边框，再给第一列和末行的td分别设置border-left和border-bottom来充当table的左下边框。最后设置表头样式为一条线，充当表格的上边框，设置每页打印表头，以保证分页后的表格有上边框

注意：不要直接给table设置border，分页以后底部会有断线

具体步骤如下（此处使用scss编写）：

1、设置tr内部不分页

tr {
    page-break-inside: avoid;
}

2、td设置右下边框，注意不能给table设置border

$dark: #333;

td {
    border-right: 1px solid $dark;
    border-bottom: 1px solid $dark;
}

3、第一列和末行的td分别设置border-left和border-bottom，画出table的左下边框

tr {
    &:nth-last-child(1) {
       td {
           border-bottom: 1px solid $dark;
       }
    }
}

 

4、设置表头样式为一条线，充当表格的上边框，设置每页打印表头，以保证分页后的表格有上边框

<thead>
    <tr class="head-tr">
        <td colspan="7"></td>
    </tr>
</thead>

thead {
    display:table-header-group;
    .head-tr {
        height: 1px !important;
    }
}