如何隐藏表格行溢出？

小编典典

如何隐藏表格行溢出？

css

我有一些HTML表格，其中文本数据太大而无法容纳。因此，它可以垂直扩展单元格以适应此情况。因此，现在发生溢出的行的高度是数据量较小的行的两倍。这是无法接受的。如何强制表格具有相同的行高1em？

这是一些重现该问题的标记。表格仅应为一行的高度，并隐藏溢出的文字。

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>

阅读 325

2020-05-16

共1个答案

小编典典

需要在单元格table-layout:fixed上table和white- space:nowrap;单元格上指定两个属性。您还需要将移至overflow:hidden;单元格

table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  }

2020-05-16