Почему рекламный контент не повторяется на каждой печатной странице, когда я пытаюсь распечатать веб-страницу?
У меня есть таблица, и я пытаюсь ее распечатать. В обычном режиме он работает нормально, но когда я поворачиваю свой th, он отображается на первой странице печати, но не отображается на других страницах.
th span {
transform-origin: 0 50%;
transform: rotate(-90deg);
white-space: nowrap;
display: block;
position: relative;
top: 0;
left: 50%;
}<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity = "sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin = "anonymous">
<table class = "table table-bordered">
<thead>
<tr>
<th><span style = "transform-origin: 0 50%;
transform: rotate(-90deg);
white-space: nowrap;
display: block;
position: relative;
top: 0;
left: 50%;">Firstname</span></th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>Снимок экрана первой и второй печатной страницы:
Первая печатная страница:
Вторая печатная страница:
Примечание: это работает, когда я удаляю поворот span из th
Что отсутствует?
@ R.D Это требование клиента, на самом деле в thead больше 15-го, тогда у нас есть только одна возможность распечатать его на бумаге формата А4.
Хорошо, держись. Дайте-ка подумать.
Хорошо, я решил это, только одно. Часть First name также печатается на первой странице. Поскольку на самом деле это продолжение всего имени-го имени, его невозможно удалить, если вы не измените имя-го. Это решение приемлемо для вас? Потом выложу @Rohit
Но это странно. Я не вижу ошибку, которую вы видите, когда использую ваш код. Какой браузер вы используете?
На самом деле я получил на это точный ответ.
добавление поля, влияющее на таблицу сверху страницы, не поможет?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Возможно, вам потребуется добавить к th дополнительную подкладку.
th {
padding: 3em;
}
Я получил свой ответ, теперь он исправлен и работает нормально, потому что теперь я использую CSS в коде сценария печати вместо обычного CSS.
Не могли бы вы уточнить свой ответ?
@Salketer На самом деле я использовал стиль непосредственно в CSS, но теперь я использую CSS в сценарии печати, где я кодирую для печати. Итак, теперь все работает нормально
Некоторые браузеры повторяют элемент thead на каждой странице, как и положено. Но некоторые браузеры этого не делают, вам нужно добавить дополнительный CSS для заголовка таблицы как
thead {display: table-header-group;}
Примечание: Opera 7.5 и IE 5 не будут повторять заголовки, что бы вы ни пытались.
Для печати вы можете использовать отдельный CSS.
Добавьте код в печатный носитель, как показано ниже.
@media print {
// Your code here
}
Надеюсь, это сработает.
Мне любопытно, зачем вам вращать
th?