如何隐藏表格行溢出？

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

来源

2009-10-12 Josh Stodola

您使用“

”而不是使用div/spans + CSS来执行此操作的任何特定原因？第二种方法更容易让人感到痛苦，但提供更大的灵活性。我不确定使用常规表格可以做什么。 – 2009-10-12 14:56:26

+68

我正在使用'table'，因为我正在显示表格数据！ – 2009-10-12 16:31:41

回答

需要在对细胞table和white-space:nowrap;指定两个属性，table-layout:fixed。你还需要将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

来源

2009-10-12 14:58:49

唯一的缺点（看起来）是表格单元宽度相同。任何方式来解决这个问题？ – 2009-10-12 15:53:01

据我所知 - 我相信在浏览器部分做了一个假设，因为没有定义单独的单元宽度，所以要在单元数量中均匀分割表格宽度。解决这个问题的唯一可能的方法是我可以想到的是，根据每个单元格包含的字符数（在所有单元格的总字符数之外）计算每个单元格的宽度，无论是服务器还是客户端（前者可能是更高性能的选择）。这听起来有点矫枉过正？ – 2009-10-12 16:01:59

在所讨论的行上的所有单元格中的字符总数是我在最后一条评论中的含义:) – 2009-10-12 16:03:05

唯一的缺点（看起来），是表格单元格宽度是相同的。任何的方式来解决这个问题？ - 乔希斯托多拉 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）

来源

2009-11-05 15:12:03 Popara

但宽度将根据要在其中显示多少数据而波动。这不像我在这里使用等宽字体！ – 2009-11-05 15:34:46

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

来源

2011-03-04 16:15:16 user645077

工作得很好.. – Ben 2011-11-16 05:14:37

谢谢你，这是非常有益的。 – 2012-06-26 15:12:39

比固定整个表格更好的方法。 – 2012-11-26 13:05:20

在最现代的浏览器，你现在可以指定：

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

来源

2012-06-13 21:15:21

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

来源

2013-05-13 14:14:36 Marco

Here's东西我试过了。基本上，我把“灵活”的内容（包含太长行的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>

来源

2014-02-27 08:52:53

我应该补充一点，这里的优点是我不需要设置任何绝对宽度的列。设计流畅。 – 2014-02-27 09:00:40

这里的问题是，你怎么知道哪个小区哪一个类分配给？除非你手动键入每一页，你永远需要，Web 1.0的风格，这是不是一个包罗万象的解决方案。 – 2015-10-28 09:35:34

包裹表在DIV带class = “容器”

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

然后

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

结果

来源

2018-03-03 08:57:13

如何隐藏表格行溢出？

回答

相关问题