我试图将我使用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>
这是结果的唯一页面(忽略除表格之外的其他内容):