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

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

  •  0
  • Lorenzo Fiamingo  · 技术社区  · 7 年前

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

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

    myTable

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

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

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

    <table>
      <tr>
        <td>
          <div>BLABLABLA</div>
        </td>
      </tr>
      ...
      ...
      ...
    </table>
    
    1 回复  |  直到 7 年前
        1
  •  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

    推荐文章