避免页眉在标题表中进入行距不起作用（打印）

Question

避免页眉在标题表中进入行距不起作用（打印）

Akz*_*kza 7 css google-chrome html-table puppeteer

我正在尝试使用Puppeteer chrome生成pdf。
pdf中的数据是动态的。
pdf包含我通过遍历数据生成的多个表。
因此，有两个循环，循环表和循环<td>每个表中的数据（）。

该表的标题-inside- <thead>具有rowspan。不幸的是，这<thead>并没有打破我的预期。

这是当前情况：

预期结果

我期望的是<thead>不会中断。
如果<thead>不适合，则应转到下一页。
我使用车把创建了模板。

这是模板的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>
    html,
    body {
      min-height: 150mm !important;
      max-width: 297mm !important;
    }

    @page {
      size: auto;
    }
  </style>
</head>

<body>
  <div>
    {{#each array as |data|}}
    <table>
      <thead style="page-break-inside: avoid !important">
        <tr>
          <th rowspan="2">
            One
          </th>
          <th rowspan="2">
            Two
          </th>
          <th colspan="2">
            Three
          </th>
          <th rowspan="2">
            Four
          </th>
          <th rowspan="2">
            Five
          </th>
          <th colspan="2">
            Six
          </th>
          <th colspan="2">
            Seven
          </th>
        </tr>
        <tr>
          <th>
            Three child 1
          </th>
          <th>
            Three child 2
          </th>
          <th>
            Six child 1
          </th>
          <th>
            Six child 2
          </th>
          <th>
            Seven child 1
          </th>
          <th>
            Seven child 2
          </th>
        </tr>
      </thead>
      <tbody>
        {{#each data.innerArray as |innerData|}}
        <tr>
          <td>
            {{innerData.one}}
          </td>
          <td>
            {{innerData.two}}
          </td>
          <td>
            {{innerData.three.one}}
          </td>
          <td>
            {{innerData.three.two}}
          </td>
          <td>
            {{innerData.four}}
          </td>
          <td>
            {{innerData.five}}
          </td>
          <td>
            {{innerData.six.one}}
          </td>
          <td>
            {{innerData.six.two}}
          </td>
          <td>
            {{innerData.seven.one}}
          </td>
          <td>
            {{innerData.seven.two}}
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
    {{/each}}
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我试过了

我试着集page-break-inside: avoid !important里面的<thead>，<tr>，<th>但它不工作。
我试着<thead>用<div>和给page-break-inside: avoid !importantdiv 换行，但仍然无法正常工作。

我不知道该怎么做。有什么帮助吗？

更新

我乐于与纯JavaScript结合使用来解决此问题。我在想，是否可以尝试检测的位置<thead>，然后检查位置是否<thead>靠近页面底部（精确距离）？如果符合条件，它将仅在该表中添加样式page-break-before-true？

Answer 1

小智 3

尝试限制每列的宽度，因为style="width: <somevalue>%;"总共它应该满足 100%，如下面的代码。更改 % 值并根据您在每列中维护的内容量拆分为列。

示例代码：

<tr>
  <th rowspan="2" style="width: 10%;">
    One
  </th>
  <th rowspan="2" style="width: 20%;">
    Two
  </th>
  <th colspan="2" style="width: 20%;">
    Three
  </th>
  <th rowspan="2" style="width: 5%;">
    Four
  </th>
  <th rowspan="2" style="width: 5%;">
    Five
  </th>
  <th colspan="2" style="width: 20%;">
    Six
  </th>
  <th colspan="2" style="width: 20%;">
    Seven
  </th>
</tr>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，3 月前
查看次数：	352 次
最近记录：	6 年，3 月前