Вот полный 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
, Это дает несколько иные результаты при печати, но все еще плохо (теперь тоже неправильные высоты ячеек):