Question

我有一些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>

Answer 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;  }

Here's a Demo 。在Firefox 3.5.3和IE 7中测试

Answer 2

通常，如果您使用white-space: nowrap;，可能是因为您知道哪些列将包含包装（或拉伸单元格）的内容。对于这些列，我通常将单元格的内容包装在具有特定span属性的class中，并应用特定的width。

示例：

<强> HTML ：

<td><span class="description">My really long description</span></td>

<强> CSS ：

span.description {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
}

Answer 3

在大多数现代浏览器中，您现在可以指定：

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

然后，如果您应用上述帖子中的样式，如下所示：

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

结果在整个表格中为您提供了很好的隐藏溢出。适用于最新的Chrome，Safari，Firefox和IE。我没有在9之前的IE测试 - 但我的猜测是它可以恢复到7，你甚至可以幸运地看到5.5或6支持。 ;）

Answer 4

这是我尝试过的东西。基本上，我将“灵活”内容（包含太长行的td）放在一个高一行的div容器中，隐藏溢出。然后我让文字换成隐形。但是，你可以在文字破解中获得休息，而不仅仅是平稳的切断。

table {
    width: 100%;
}

.hideend {
    white-space: normal;
    overflow: hidden;
    max-height: 1.2em;
    min-width: 50px;
}
.showall {
    white-space:nowrap;
}

<table>
    <tr>
        <td><div class="showall">Show all</div></td>
        <td>
            <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
        </td>
        <td>
            <div class="showall">Show all this too</div>
        </td>
    </tr>
</table>

Answer 5

只有缺点（看起来），就是那个表格单元格宽度相同。任何绕过这个的方法？ - 约什·斯托多拉 10月12日15:53

只需为每个表格单元格定义表格宽度和宽度

类似

table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}

它就像一个魅力：o）

Answer 6

如果接受javascript作为答案，我制作了一个jQuery插件来解决此问题（有关该问题的详细信息，请参阅CSS: Truncate table cells, but fit as much as possible）。

要使用插件，只需输入

即可

$('selector').tableoverflow();

插件： https://github.com/marcogrcr/jquery-tableoverflow

完整示例： http://jsfiddle.net/Cw7TD/3/embedded/result/

Answer 7

将表格包装在 div 中，并使用class =“container”

div.container {
    width: 100%;
    overflow-x: auto;
}

然后

#table_id tr td {
   white-space:nowrap;
}

结果

如何隐藏表行溢出？

7 个答案: