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

Question

我知道对此有很多疑问，但是他们的解决方案都不适合我。

我有一个仅由一张表格构成的html页面（我要打印），我希望该表格完全适合水平a4纸。

这是我的没有文字的桌子（是裁判）：

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

我尝试将 div 添加到 td 中的高度，但这不能很好地工作...

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

这是我的桌子的一个例子：

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

Answer 1

我建议使用table-layout: fixed来管理表和单元格的大小。然后，如下面的示例所示，管理溢出。 这给了您伸展的桌子，不会适应内容的高度。

.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中，并根据表格进行适当调整。

参考文献：

• Media Queries

• Position Fixed