首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS/Javascript强制html表格行在单行上

CSS/Javascript强制html表格行在单行上
EN

Stack Overflow用户
提问于 2009-01-08 23:01:50
回答 10查看 127.9K关注 0票数 75

我有一个HTML表,如下所示:

代码语言:javascript
复制
-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

但我希望它能隐藏溢出。这里的原因是,文本包含指向更多细节的链接,而“换行”在我的布局中浪费了大量空间。它应该是这样的(不增加列或表的宽度,因为它们会从屏幕上消失/否则会创建一个水平滚动条):

代码语言:javascript
复制
-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------

我尝试了很多不同的CSS技术来实现这一点,但是我不能让它变得正确。Mootable是我发现的唯一能做到这一点的东西:http://joomlicious.com/mootable/,但我不知道他们是怎么做到的。有谁知道我如何使用CSS和/或Javascript在我自己的表中做到这一点,或者Mootables如何做到这一点?

示例HTML:

代码语言:javascript
复制
<html><body>
<table width="300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>this is the text in column one which wraps</td>
   <td>this is the column two test</td>
</tr>
</table></body></html>
EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2009-01-08 23:04:30

在td上使用CSS属性white-space: nowrapoverflow: hidden

更新

刚看了你的评论,不知道我在想什么,我做过很多次了,我都忘了我是怎么做的了。对于我来说,这是一种在大多数浏览器中都工作得很好的方法。我没有尝试约束td,而是在td中使用了一个div来处理溢出实例。这有一个很好的副作用,可以将填充、页边距、背景颜色等添加到div中,而不是尝试设置td样式。

代码语言:javascript
复制
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
        this is the text in column one which wraps</div></td>
   <td>
    <div class="hideextra" style="width:100px">
        this is the column two test</div></td>
</tr>
</table>
</body>
</html>

作为额外的好处,IE将在溢出的情况下使用浏览器特定的文本溢出:省略号样式放置一个省略号。也有一种自动执行do the same in FireFox的方法,但我还没有亲自测试过。

更新2

我开始使用贾斯汀·麦克斯韦尔的this truncation code已经有几个月了,它在FireFox中也能正常工作。

票数 110
EN

Stack Overflow用户

发布于 2009-01-09 03:09:41

这里的技巧是使用深奥的table-layout:fixed规则

这个CSS应该和你的HTML样例一起工作:

代码语言:javascript
复制
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}

您还应该为<td>指定显式列宽。

table-layout:fixed规则说“这个表格的单元格宽度取决于我所说的内容,而不是单元格中的实际内容”。这通常很有用,因为浏览器可以在收到第一个<tr>后开始显示表。否则,浏览器必须先接收整个表,然后才能计算列宽。

票数 31
EN

Stack Overflow用户

发布于 2009-01-08 23:04:55

尝试:

代码语言:javascript
复制
td, th {
  white-space: nowrap;
  overflow: hidden;
}
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/426398

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档