避免在两个特定行之间发生分页符

Question

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

标题：| 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. 将两行放入表格中（与标题失去对齐）

Answer 1

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

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

Answer 2

您可以使用嵌套表格，即当前第 1 行和第 3 行中的每个 td 单元格都可以包含一个表格，该表格由 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>

Answer 3

<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>