Ответ 1
Вам абсолютно необходимо отойти от стола, если вам нужна читаемая вертикальная печать на странице. Таблицы отлично подходят для отображения на странице при табличных данных, но не являются жизнеспособным решением для печати, поскольку они не учитывают поток.
Есть плагины (например, здесь, здесь нет, аффилированность - только результат Google), который сделает это автоматически для вас, но вот пример. Когда вы используете это, убедитесь, что @media print указан соответствующим образом. Чтобы протестировать локально, вы можете изменить это на @media screen.
Это не отображает перечисленные правила @page, но они отображаются с помощью предварительного просмотра печати.
Надеюсь, что это поможет:
Скрипт для печати на портрете
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
@media print {
@page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Изменить - Печать по горизонтали на нескольких страницах:
Хорошо, так что это, вероятно, гораздо менее распространенный случай использования, и мы должны делать с ним что-то смешное - так справедливое предупреждение. Я попытаюсь объяснить это шаг за шагом, как это загадочно и неприятно.
Скрипт для печати в ландшафте здесь!
CSS
@media print {
@page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
Это часть, которая имеет значение, поскольку она устанавливает ваши директивы печати. Большинство из них - это материал, который мы видели в оригинале (с некоторыми настройками, когда я играл с ним).
Часть, о которой мы заботимся, здесь:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
То, что мы делаем, это нанести все это на свою сторону, а затем сместить его туда, где мы ожидаем. translate(8.5in, -100%) сообщает браузеру - сдвиньте этот элемент на 8,5 дюйма (ширина стандартной бумажной бумаги в США) вправо, а затем сдвиньте его на 100% от его высоты (отрицательный указывает вверх, а не вниз). Мы сдвигаем его вправо на 8,5 дюйма, чтобы он отображался в верхней части страницы при повороте. Мы сдвигаем его вверх по своей расчетной высоте, чтобы у нас не было уродливого зазора слева от таблицы, когда происходит поворот.
Затем мы проинструктируем его, что мы хотим, чтобы все эти вычисления выполнялись относительно bottom left нормального положения элемента в потоке документа. Это заставляет этот сумасшедший длинный стол поворачиваться вправо, устанавливая свойство left. Свойство bottom важно, потому что мы вращаем его по часовой стрелке на четверть оборота, и если бы мы сделали это сверху, это было бы со страницы слева. Этот четвертый ход описан в следующей части инструкции transform: rotate(90deg);
Voila. Вещь печатается на нескольких страницах.
Перед тем, как вы спросите: Нет. Невозможно предотвратить разрыв страницы внутри элемента, о котором я знаю. Я знаю, что это неприятно, уродливо и все это мусор, но мы можем работать только с инструментами, которые нам даны.
