如何隐藏表格行溢出？
我有一些HTML表格，文字数据太大，不适合。 所以，它垂直扩展单元以适应此。 所以，现在有溢出的行是具有较小数据量的行的两倍。 这是不能接受的。 我怎么能强制table有相同的行高度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>
需要指定两个属性， 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; }
这是一个演示 。 testingFirefox 3.5.3和IE 7
一般来说，如果你使用white-space: nowrap; 这可能是因为你知道哪些列将包含包装（或拉伸细胞）的内容。 对于那些列，我通常用一个特定的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; }
在大多数现代浏览器中，您现在可以指定：
<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>
然后，如果您应用上述post中的样式，如下所示：
table { table-layout: fixed; /* This enforces the "col" widths. */ } table th, table td { overflow: hidden; white-space: nowrap; }
结果给你很好的整个表的隐藏溢出。 适用于最新的Chrome，Safari，Firefox和IE。 我在9之前没有在IE中testing – 但我的猜测是它可以回到7，甚至可能有足够的幸运看到5.5或6的支持。 ;）
唯一的缺点是，表格单元格的宽度是相同的。 任何方式来解决这个问题？ – 乔希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）
如果JavaScript被接受为答案，我做了一个jQuery插件来解决这个问题（关于问题的更多信息，请参阅CSS：截断表单元格，但尽可能适合 ）。
要使用插件只需键入
$('selector').tableoverflow();
插件： https ： //github.com/marcogrcr/jquery-tableoverflow
完整的例子： http : //jsfiddle.net/Cw7TD/3/embedded/result/
这是我试过的东西。 基本上，我把“灵活”的内容（包含太长行的td）放在一行高的div容器中，隐藏溢出。 然后，我让文本包裹成隐形。 尽pipe你可以在断章节rest，而不仅仅是一个平稳的截点。
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>
