如何隐藏表行溢出？

问题描述 投票：54回答：7

我有一些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>
html css html-table
7个回答
97
投票

需要在单元格上指定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中测试过

22
投票

通常，如果您使用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;
}
8
投票

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

<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支持。 ;）

2
投票

这是我尝试过的东西。基本上，我将“灵活”内容（包含太长行的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>
1
投票

只有缺点（似乎），表格单元格宽度是相同的。有办法解决这个问题吗？ - Josh Stodola 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）

0
投票

如果接受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/

0
投票

用class =“container”将表包装在div中

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

然后

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

结果

overflow effect

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.