代码之家 › 专栏 › 技术社区 › Lorenzo Fiamingo

如何避免表格单元格垂直溢出并打印表格?

overflow html-table html5 css html

0

Lorenzo Fiamingo · 技术社区 · 7 年前

我有一个只有一个表格(我想打印)组成的html页面,我希望表格完全适合在一个水平的a4纸内。

这是我的表格,没有文字(是比赛裁判):

myTable

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

我试着补充迪夫里面 td公司

另外我想知道如何水平打印页面,因为我的表格溢出了打印区域。。。

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

1 回复 | 直到 7 年前

1

Andreew4x4 7 年前

我建议使用 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