打印时会剪切HTML表格

时间:2017-03-21 13:53:12

标签: html css twitter-bootstrap

我试图将我使用Bootstrap和自定义CSS设置样式的HTML表打印到PDF,但是在第一页之后总是会切换表,这会导致应该出现在第二页上的行消失。第二页甚至不打印。

表的CSS(除了默认的Bootstrap CSS):

#report-table {
    width: 100%
}

#report-table thead,
#report-table tbody,
#report-table tr,
#report-table td,
#report-table th{
    display: block;
}

#report-table tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

#report-table thead th {
    height: 30px;
}

#report-table tbody{
    height: 325px;
    overflow-y: auto;
    overflow-x: hidden;
}

#report-table tbody td,
#report-table thead th {
    width: 50%;
    float: left;
}

#report-table table {
    margin-bottom: 0px !important;
}
@media print {
    #report-table tbody {
        height: 100% !important;
    }
    #report-table table {
        margin-bottom: auto !important;
    }
}

表格的html:

<table class="table table-striped"><thead><tr><th>Activity</th> <th>Duration</th></tr></thead> <tbody><tr><td>yay</td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:02
                        </td></tr><tr><td>y</td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td>ay</td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:00
                        </td></tr><tr><td></td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:01
                        </td></tr><tr><td></td> <td>
                            00:00:01
                        </td></tr><tr><td>end</td> <td>
                            00:00:03
                        </td></tr></tbody></table>

这是结果的唯一页面(忽略除表格之外的其他内容):

enter image description here

0 个答案:

没有答案