Question

我有这段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

Answer 1

你的意思是桌子离开页面的边缘，只有在打印时？你不能只设置表的宽度，以及css中各列的宽度。

将第一行中的tds分开，并相应地设置宽度。如果您只需要css来更改打印输出，则可以设置单独的仅打印样式表。

当谷歌浏览器或Safari打印时，HTML表格被切断（太宽）

1 个答案: