Вот полный 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)

Решение Вопроса

Добавление

td, th {
  width: 10000px;
}

внутри@media print { } сделал трюк, чтобы заставить пример кода работать.

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

Работает в текущих версиях Webkit (Safari), FF и Chrome (все тестируются только на macOS).

Предостережение:

К сожалению, вышесказанное не является доказательством дурака. Это работает только в этом примере, потому что ячейки в каждой строке имеют одинаковую ширину.

Как только эти ширины являются случайными, чрезмерная ширина пикселя, такая как 10000px, снова запутывает столбцы.

Единственное решение, которое я нашел вокруг этого, состоит в том, чтобы обеспечить фактическую ширину, которая будет использоваться. Так как это для печати, и, поскольку я знаю, что хочу печатать в определенном формате бумаги (например, DIN A4 или US Letter), я могу точно определить ширину столбца.

Таким образом, хотя это решение не подходит для просмотра веб-страниц в браузере на экране, где общая ширина может варьироваться, оно является хорошим решением для печати, если можно предсказать целевой размер печати.

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

<!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;
  }
  td:nth-child(1), th:nth-child(1) {
    width: 4cm;
  }
  td:nth-child(2), th:nth-child(2) {
    width: 2cm;
  }
  td:nth-child(3), th:nth-child(3) {
    width: 3cm;
  }
}
</style></head>
<body>
<table>
  <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 adasd<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>1asd<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>xsdsdfsf</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 asda asdas<br>3<br>4<br>5<br>6<br></td><td>xasdada</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4 asdasd <br>5<br>6<br></td><td>x</td><td>x</td></tr>
</table>
</body></html>

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