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

Question

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

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

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

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

我尝试在td内以一定的高度添加div ，但是效果不佳...

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

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

<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并适当调整到您的桌子。

参考文献：

• 媒体查询

• 固定位置