Вот полный HTML-код, устанавливающий ширину столбцов 4 см, 2 см и 3 см:

ерирую html программно для того, чтобы он хорошо отображался для печати.

Я должен напечатать таблицы, которые могут занимать несколько страниц. Это создает некоторые проблемы, такие как предотвращение распространения содержимого ячейки на две страницы, например:

Я нашел решение вэтот ответ, который используетpage-break-inside:avoid, вместе сэтот ответ, который используетdisplay: block для<tr> элементы, чтобы предотвратить их вертикальное разделение.

Однако это также приводит к тому, что строки больше не выровнены друг с другом по вертикали. Как мне это исправить?

Вот как это должно выглядеть (и как браузер отображает его на экране):

И вот что это делает для печати:

Как выровнять распечатку так же, как она выровнена на экране, не теряяdisplay: block способность сохранять ячейки вертикально неповрежденными при разрывах страниц? Он должен работать в Webkit (Safari) на macOS.

Вот полный HTML-код. Он занимает две страницы, чтобы можно было проверить, появляются ли отдельные ячейки наполовину на одной половине на следующей странице (что нежелательно):

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">
th, td { border: 1px solid #aaa; }
@media print {
  table, tr, td, th {
    page-break-inside: avoid;
  }
  tr {
    display: block;
    page-break-before: auto;
  }
}
</style></head>
<body>
<table style="width:40%">
  <tr><th>A</th><th>B</th><th>C</th></tr>
  <tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
</table>
</body></html>

Обновить:

Я тоже пробовалэто решение который используетdiv вместоtable, Это дает несколько иные результаты при печати, но все еще плохо (теперь тоже неправильные высоты ячеек):

Ответы на вопрос(1)

Ваш ответ на вопрос