1

这个答案有助于避免在表格的单行内出现分页符，但是我正在寻找一种方法来防止在两个不同的行之间发生分页符。让我解释一下我的情况（为格式化道歉）：

标题：| Col1 | Col2 | Col3 | Col4 |

第 1 行：| VAL1 | val2 | VAL3 | val4 |

第 2 行：| 与 1,2,3,4 相关的值 |

第 3 行：| VAL5 | VAL6 | VAL7 | VAL8 |

第 4 行：| 与 5,6,7,8 相关的值 |

我有一个表，其中每两行相互关联，不应在单独的页面上显示。每对中的第二行有一个值，应该能够跨越该行的所有列。

我尝试了以下使用page-break-inside: avoid：

  1. 将两行放在<div>标签内
  2. 让 Col4 跨越两行（Col4 内容只是移动到下一页）
  3. 将两行都放入表格中（失去与标题的对齐）
4

3 回答 3

1

您应该使用多个<tbody>标签而不是<div>. 该属性page-break-inside: avoid必须设置在<tbody>.

在 HTML 表格中，您只能设置一个<thead>and <tfoot>，但可以设置多个<tbody>.

于 2020-12-11T12:53:40.673 回答
0 

<style type="text/css">
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }

    </style>
    
    <table style="border: 1px solid black">
        <tr>
            <td>value 1</td>
            <td> value 2</td>
            <td> value 3</td>
            <td>value 4</td>
        </tr>
        <tr>
            <td colspan="4"> Values ralted to 1, 2, 3, 4</td>
        </tr>
    </table>

于 2020-12-14T10:48:01.683 回答
0

您可以使用嵌套表格，即td当前第 1 行和第 3 行中的每个单元格都可以包含一个表格，该表格由 1 列和 2 行组成，每行有 1 个单元格，第二行中的单元格包含与第一行相关的值。

因此，您的第 1 行和第 2 行将变为一行，其中包含 4 个单元格，每个单元格包含一个嵌套表，其中包含 2 行，每行 1 个单元格。您当前的第 3 行和第 4 行等也是如此。

然后你可以申请page-break-inside: avoid这些嵌套表。

.maintable {
  width: 100%;
  border-collapse: collapse;
}

.maintable > tbody > tr > th, .maintable > tbody > tr > td {
  border: 1px solid #ddd;
}
.maintable > tbody > tr > td > table {
page-break-inside: avoid;
  width: 100%;
border-collapse: collapse;
}
.maintable > tbody > tr > td > table tr:first-child td {
  border-bottom: 1px solid #ddd;
}
<table class="maintable">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>value 1</td>
        </tr>
        <tr>
          <td>related value 1a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 2</td>
        </tr>
        <tr>
          <td>related value 2a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 3</td>
        </tr>
        <tr>
          <td>related value 3a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 4</td>
        </tr>
        <tr>
          <td>related value 4a</td>
        </tr>
      </table>
    </td>
  </tr>
<tr>
    <td>
      <table>
        <tr>
          <td>value 5</td>
        </tr>
        <tr>
          <td>related value 5a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 6</td>
        </tr>
        <tr>
          <td>related value 6a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 7</td>
        </tr>
        <tr>
          <td>related value 7a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 8</td>
        </tr>
        <tr>
          <td>related value 8a</td>
        </tr>
      </table>
    </td>
  </tr>
  </table>

于 2020-12-07T16:41:31.550 回答