HTML, CSS - разрыв строки для длинной таблицы нуждается в исправлении

Я довольно долго играл с page-break-inside:auto, page-break-inside:avoid, page-break-after:auto, margin-top and margin-bottom и другими, но все еще не могу найти решение, как разбивать строки в моя длинная таблица HTML, предназначенная для печати. ​​

Страница выглядит как левый скриншот в режиме печати (или в окне предварительного просмотра перед печатью в Chrome):

 введите описание изображения здесь

Все, что мне нужно сделать, это разбить каждую строку внизу каждой страницы, которая будет разделена на две страницы (и их содержание тоже ..)

Это кусок кода моей страницы:

...
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td { padding-left: 15px; padding-right: 15px; }
@media print{
    .netisk{
        visibility: hidden;
    }
}
@page{
    size: 21cm 29.7cm;
    margin: 0px;
}
body {
    margin-left: 1cm;
    margin-right: 1cm;
}
</style>
...
...
...
<?php

    echo "<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody>";

if (mysql_num_rows($result) > 0) {
    while($row = mysql_fetch_assoc($result)) {
        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["nazev_projektu"]. "</td><td>" . $row["kategorie"]. "</td><td>" . $row["autor"]. "</td><td>" . $row["trida"]. "</td><td>" . $row["rok"]. "</td><td>" . $row["vedouci_prace"]. "</td></tr>";
    }
}
    echo "</tbody></table>";

    mysql_close($mysql_conn);

?>
...
...

Страница находится здесь: http://student.spsbv.cz/krolop.el12a /mproj /компоненты /tisk.php

Как видите, существует проблема, заключающаяся в том, что моя таблица динамически «растет» в зависимости от количества данных в моей базе данных MySQL, поэтому сложно назначить конкретную строку, в которой таблица должна быть разбита.

Как это решить?

РЕДАКТИРОВАТЬ: данное решение ( Как применить разрыв страницы CSS для печати таблицы с большим количеством строк? ) не устранил мою проблему, есть ли другой способ (с использованием HTML и CSS)?

13 голосов | спросил Filip CZ 9 PMpSat, 09 Apr 2016 20:09:08 +030009Saturday 2016, 20:09:08

3 ответа


0

Роберто Росси прав (я не могу добавить комментарий из-за репутации), но я также нашел этот пост с дополнительной информацией, и, похоже, это потенциальный дублирующий вопрос:

Как работать со страницей разрывы при печати большой таблицы HTML

EDIT:

Принятый ответ - Пользователь: Sinan Ünür

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Дополнительный ответ - Пользователь: Джош П

  

Примечание: при использовании разрыва страницы: всегда для тега он создает разрыв страницы после последнего бита таблицы, каждый раз создавая полностью пустую страницу в конце! Чтобы это исправить, просто измените его на разрыва страницы: авто. Он будет правильно разорван и не создаст дополнительную пустую страницу.

<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
td    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>
ответил Clockwork Coder 6 J000000Friday18 2018, 01:54:18
0

Я изменил одно правило в вашей таблице стилей, оно работает таким образом, по крайней мере, здесь, в Firefox:

@page {
    size: 18cm 26.7cm;
    margin: 1.5cm;
}

Итак, я определил поля в сантиметрах и вычел их из размера страницы. Распечатано отлично ...

ответил Johannes 9 PMpSat, 09 Apr 2016 20:54:48 +030054Saturday 2016, 20:54:48
0

Вы должны использовать разрыв страницы после:

<div class="breakafter"></div>

и стиль CSS:

div.breakafter { 
  page-break-after: always; 
}
ответил Roberto Rossi 11 J0000006Europe/Moscow 2018, 19:23:36

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132