Таблица HTML обрезается (слишком широко) при печати в Google Chrome или Safari - PullRequest
0 голосов
/ 02 ноября 2011

У меня есть этот фрагмент HTML, который, когда я пытаюсь распечатать его (в Chrome или Safari), просто обрезает таблицу, вместо того, чтобы охватить несколько страниц.

У кого-нибудь есть обходной путь для этого? Или какой-нибудь CSS, который я мог бы применить, чтобы исправить это?

<!doctype html>
<html>
    <body>
        <table>
            <tr>
                <td><div>this_is_box_a</div></td>
                <td><div>this_is_box_b</div></td>
                <td><div>this_is_box_c</div></td>
                <td><div>this_is_box_d</div></td>
                <td><div>this_is_box_e</div></td>
                <td><div>this_is_box_f</div></td>
                <td><div>this_is_box_g</div></td>
                <td><div>this_is_box_h</div></td>
                <td><div>this_is_box_i</div></td>
                <td><div>this_is_box_j</div></td>
                <td><div>this_is_box_k</div></td>
                <td><div>this_is_box_l</div></td>
                <td><div>this_is_box_m</div></td>
                <td><div>this_is_nox_n</div></td>
            </tr>
        </table>
    </body>
</html>

Кроме того, причина, по которой я использую <div>, заключается в возможности сделать следующее, что также показывает ту же проблему.

<!doctype html>
<html>
    <head>

        <style>
            body {
                margin-top: 20em;
            }

            td {
                position: relative;
            }

            div {
                position: absolute;
                bottom: -3px;
                -webkit-transform: rotate(-45deg);
                -webkit-transform-origin: 0% 0%;
            }
        </style>

    </head>

    <body>
        <table>
            <tr>
                <td><div>this_is_box_a</div></td>
                <td><div>this_is_box_b</div></td>
                <td><div>this_is_box_c</div></td>
                <td><div>this_is_box_d</div></td>
                <td><div>this_is_box_e</div></td>
                <td><div>this_is_box_f</div></td>
                <td><div>this_is_box_g</div></td>
                <td><div>this_is_box_h</div></td>
                <td><div>this_is_box_i</div></td>
                <td><div>this_is_box_j</div></td>
                <td><div>this_is_box_k</div></td>
                <td><div>this_is_box_l</div></td>
                <td><div>this_is_box_m</div></td>
                <td><div>this_is_nox_n</div></td>
            </tr>
            <tr>
                <td>this_is_box_a</td>
                <td>this_is_box_b</td>
                <td>this_is_box_c</td>
                <td>this_is_box_d</td>
                <td>this_is_box_e</td>
                <td>this_is_box_f</td>
                <td>this_is_box_g</td>
                <td>this_is_box_h</td>
                <td>this_is_box_i</td>
                <td>this_is_box_j</td>
                <td>this_is_box_k</td>
                <td>this_is_box_l</td>
                <td>this_is_box_m</td>
                <td>this_is_nox_n</td>
            </tr>
        </table>
    </body>
</html>

Чтобы уточнить немного, когда я печатаю документ, я получаю одну страницу вывода. Эта страница вывода выглядит следующим образом. Я бы хотел, чтобы он занимал 2 страницы.

image showing cut off text

1 Ответ

0 голосов
/ 02 ноября 2011

Вы имеете в виду, что таблица выходит за край страницы, только при печати? Разве вы не можете просто установить ширину таблицы и отдельных столбцов в css.

Дайте ТД в первом ряду отдельные классы и установите ширину соответственно. Если вам нужно только изменить CSS для вывода на печать, вы можете установить отдельную таблицу стилей только для печати. ​​

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...