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

Posted 2023-03-06

【中文标题】如何不垂直溢出表格单元格并打印表格？

【英文标题】：How to not vertically overflow table cells and print the table?

【发布时间】：2019-06-08 10:37:57

【问题描述】：

我知道有很多关于这方面的问题，但他们的解决方案都不适合我。

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

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

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

我尝试在 td 中添加 div 并设置高度，但这效果不佳...

另外我想知道如何水平打印页面，导致我的表格溢出打印区域...

这是我的表格的一个例子：

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

【问题讨论】：

如果内容不合适 - 如果表格比工作表大，您希望表格如何反应？你的 CSS 代码在哪里？

【参考方案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

【讨论】：

问题是我不想根据内容调整高度。

所以它不会适应:)

@LorenzoFiamingo 如果你同意的话，请标记我的问题。