html-如何隐藏表行溢出?
我有一些HTML表格,其中文本数据太大而无法容纳。 因此,它可以垂直扩展单元格以适应此情况。 因此,现在发生溢出的行的高度是数据量较小的行的两倍。 这是无法接受的。 如何强制表格具有相同的行高1em?
这是一些重现该问题的标记。 表格仅应为一行的高度,并隐藏溢出的文字。
Testtable { width:250px; }
table tr { height:1em; overflow:hidden; }
This is a test. | Do you see what I mean? | I hate this overflow. |
7个解决方案
97 votes
需要指定两个属性,即table上的table-layout:fixed和单元格上的white-space:nowrap;。 您还需要将overflow:hidden;也移动到单元格中
table { width:250px;table-layout:fixed; }
table tr { height:1em; }
td { overflow:hidden;white-space:nowrap; }
这是一个演示。 在Firefox 3.5.3和IE 7中测试
Russ Cam answered 2019-11-18T11:31:40Z
22 votes
通常,如果您使用white-space: nowrap;,则可能是因为您知道哪些列将包含换行(或拉伸单元格)的内容。 对于这些列,我通常将单元格的内容包装在具有特定class属性的span中,并应用特定的width。
例:
HTML:
My really long descriptionCSS:
span.description {
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 150px;
}
user645077 answered 2019-11-18T11:32:17Z
8 votes
在大多数现代浏览器中,您现在可以指定:
My 100px headerMy 200px headerMy 145px header
100px is all you get - anything more hides due to overflow.200px is all you get - anything more hides due to overflow.100px is all you get - anything more hides due to overflow.然后,如果您应用以上文章中的样式,则如下:
table {
table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
overflow: hidden;
white-space: nowrap;
}
结果使您在整个表中都很好地隐藏了溢出。 适用于最新的Chrome,Safari,Firefox和IE。 我还没有在IE 9之前的版本中进行过测试-但是我猜它可以在7之前运行,并且您甚至很幸运可以看到5.5或6的支持。 ;)
Troy Alford answered 2019-11-18T11:33:00Z
2 votes
这是我尝试过的东西。 基本上,我将“灵活”的内容(td包含太长的行)放在一个高一行的div容器中,并隐藏了溢出。 然后,我将文本包装成不可见的文本。 但是,您会在分词符时中断,而不仅仅是平滑的中断。
table {
width: 100%;
}
.hideend {
white-space: normal;
overflow: hidden;
max-height: 1.2em;
min-width: 50px;
}
.showall {
white-space:nowrap;
}
Show all
|
Be a bit flexible about hiding stuff in a long sentence
|
Show all this too
|
John Liungman answered 2019-11-18T11:33:25Z
1 votes
唯一的缺点(看来)是 表单元格的宽度是相同的。 任何 解决这个问题的方法? –乔什·斯托多拉 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)
Popara answered 2019-11-18T11:34:12Z
0 votes
如果接受javascript作为答案,我制作了一个jQuery插件来解决此问题(有关此问题的更多信息,请参见CSS:截断表单元格,但要尽可能地合适)。
要使用插件,只需键入
$('selector').tableoverflow();
插件:[https://github.com/marcogrcr/jquery-tableoverflow]
完整示例:[http://jsfiddle.net/Cw7TD/3/embedded/result/]
Marco answered 2019-11-18T11:35:00Z
0 votes
用class =“ container”将表格包装在div中
div.container {
width: 100%;
overflow-x: auto;
}
然后
#table_id tr td {
white-space:nowrap;
}
结果
Dan Alboteanu answered 2019-11-18T11:35:38Z