如何不垂直溢出 table 单元格并打印 table？

Question

我知道有很多关于此的问题，但是 none 他们的解决方案对我有用。

我有一个 html 页面仅由 table 组成（我想要打印），我希望 table 完全适合水平 a4 sheet .

这是我的table没有文字（是比赛裁判）：

_{（来源：i.ibb.co）}

问题是，当我添加一些文本时，高度会发生变化。

我尝试在 td 中添加 div 并添加一个高度，但效果不佳...

我也想知道如何水平打印页面，导致我的table溢出打印区域...

这是我的例子 table:

<table>
  <tr>
    <td>
      <div>BLABLABLA</div>
    </td>
  </tr>
  ...
  ...
  ...
</table>

Answer 1

我建议使用 table-layout: fixed 来管理 table 和单元格的大小。然后如下例所示管理溢出。这让你拉伸 table，不会根据内容调整高度。

.myTable {
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.myTable tr td div{
  overflow: hidden;
  border: 1px solid #333;
  height: 20px;
}

.myTable tr.higher td div {
  height: 40px;
}

<table class="myTable">
  <tr>
    <td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
  <td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
  </tr>
  <tr class="higher">
    <td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
    <td><div>A lot of text to display. A lot of text to display.</div></td>
  </tr>
</table>

您可以将其插入 @media print 并适当调整以适应您的 table。

参考文献：

如何不垂直溢出 table 单元格并打印 table？

How to not vertically overflow table cells and print the table?

html

css

html-table

overflow