如何在表格中避免多个级别的分页符?

时间:2015-06-03 16:18:23

标签: html css

我正在创建一个非常复杂的视图来关联表格数据的分组与所有需要对齐的总计。为此,我想出了以下HTML:

<table>
    <tr class="header_row"></tr>
    <tr class="inner_group_row"></tr>
    <tr class="data_row"></tr>
    <tr class="data_row"></tr>
    <tr class="inner_group_row"></tr>
    <tr class="data_row"></tr>
    <tr class="spacer_row"></tr>
    <tr class="header_row"></tr>
    <tr class="inner_group_row"></tr>
    <tr class="data_row"></tr>
    <tr class="data_row"></tr>
    <tr class="spacer_row"></tr>
    <tr class="totals_row"></tr>
    <tr class="average_row"></tr>
</table>

这很好用,但最终的游戏是用户可以点击一个按钮并将其呈现为PDF,然后将其下载(基于过滤器和他们即时更改的其他内容)。

生成PDF时(通过EvoPdf)我想确保分页符不会破坏分组,所以我将HTML修改为如此:

<table>
    <tbody class="data_group">
        <tr class="header_row"></tr>
        <tr class="inner_group_row"></tr>
        <tr class="data_row"></tr>
        <tr class="data_row"></tr>
        <tr class="inner_group_row"></tr>
        <tr class="data_row"></tr>
        <tr class="spacer_row"></tr>
    </tbody>
    <tbody class="data_group">
        <tr class="header_row"></tr>
        <tr class="inner_group_row"></tr>
        <tr class="data_row"></tr>
        <tr class="data_row"></tr>
        <tr class="spacer_row"></tr>
    </tbody>
    <tbody class="totals_group">
        <tr class="totals_row"></tr>
        <tr class="average_row"></tr>
    </tbody>
</table>

<style>
    .data_group, .totals_group { page-break-inside: avoid; }
<style>

现在如果第二个data_group整体不适合第一页,那么它现在正确地将第二个data_group放到新页面上。完美。

data_group大于单个页面时。然后我想尝试至少使与内部分组相关的所有行保持在一起。但是,这让我很难过,因为你不能将<tbody>标签嵌套在彼此之内。

在这一点上,当我们已经在更高级别进行分组时,我很难理解如何将多行组合在一起。

请注意,所有行(偶数inner_group_row行)都有表格数据,所有表格都需要与整个表格中的所有其他行对齐,

0 个答案:

没有答案