Таблица с неправильной версткой thead и tfoot при печати в Chrome - PullRequest
0 голосов
/ 13 мая 2019

Я использую Puppeteer для генерации PDF на Linux Alpine.Я использую трюк thead tbody tfoot, чтобы получить правильные верхние и нижние колонтитулы на каждой странице.

Я заметил странное поведение с тем, как хром и хром размещаются при печати.А именно, пропуская первую страницу при рендеринге таблицы.

Вот репродукция (протестированная для Chrome 73.0.3683.75 в Ubuntu 18.04, может быть важна, так как это репродукция была довольно сложной для воссоздания, а рендеринг шрифтов мог повлиять на макет).

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    thead {
      display: table-header-group;
    }
    
    tfoot {
      display: table-footer-group;
    }
    
    table {
      border-collapse: collapse;
    }
    
    html,
    body,
    table,
    tr,
    td {
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
    }
  </style>
</head>

<body>
  <table>
    <thead style="background:#fcc">
      <tr>
        <td>
          <div style="height: 231px">head</div>
        </td>
      </tr>
    </thead>
    <tbody style="background:#cfc">
      <tr>
        <td>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
        </td>
      </tr>
      <tr>
        <td>widow</td>
      </tr>
    </tbody>
    <tfoot style="background:#ccf">
      <tr>
        <td>
          <div style="height:231px">foot</div>
        </td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

Обратите внимание, что при загрузке этой страницы и нажатии Ctrl + P таблица начинает рендеринг на второй странице документа https://i.imgur.com/nFEl6XX.png. Я ожидаю, что она начнется впервая страницаЕсть ли для этого правило css, что-то вроде page-break-inside: do-it-please-instead-of-messing-up-my-table?

Редактировать: Забыл настройку, используйте поля None, чтобы воспроизвести проблему https://i.imgur.com/61gPr0o.png

Кроме того, касательная проблема:Удаление второй строки таблицы, <tr><td>widow</td></tr>, показывает еще один неожиданный артефакт рендеринга: https://i.imgur.com/lLpa4yH.png. Здесь tbody начинает отображаться на первой странице, но выталкивает tfoot на вторую страницу.Я бы хотел, чтобы tbody сломался и в этом случае.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...