时间戳

首页 > 解决方案 > 打印时如何避免截断部分 HTML 表格

html - 打印时如何避免截断部分 HTML 表格

问题描述

我有一个大的 HTML 表格，我希望能够打印。现在，当我从最新版本的 Chrome 或 Safari 打印时，我只得到前四列和所有行。

我假设有一些我可以添加的 CSS 允许在其他页面上打印额外的列，但我不确定那会是什么。

我在下面包含了一个 CodePen 和完整的 HTML。

打印 HTML CodePen

<html>
<head>
   <style>
      table, td, th { border: 1px solid black; }
      td { background-color: #e3fcef; }
      th { width: 2in; }
      tr { height: 2in; }
   </style>
</head>
<body>
   <table>
      <thead>
         <tr>
            <th>
            </th>
            <th style="tableheader">Header&nbsp;A</th>
            <th style="tableheader">Header&nbsp;B</th>
            <th style="tableheader">Header&nbsp;C</th>
            <th style="tableheader">Header&nbsp;D</th>
            <th style="tableheader">Header&nbsp;E</th>
            <th style="tableheader">Header&nbsp;F</th>
            <th style="tableheader">Header&nbsp;G</th>
            <th style="tableheader">Header&nbsp;H</th>
         </tr>
      </thead>
      <tbody>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td><td>withalongwordthatcannotbeeasilybroken</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
            <tr><th>Row A</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td></tr>
         </tbody>
   </table>
</body>
</html>

标签： htmlcssprintinghtml-table

解决方案

推荐阅读