CSS/Javascript强制html表行在一行

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

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

但我希望它隐藏溢出.这里的原因是文本包含更多细节的链接,并且"包装"在我的布局中浪费了大量空间.它应该是这样的(不增加列或表的宽度,因为它们将离开屏幕/否则创建一个水平滚动条):

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------

我已经尝试了很多不同的CSS技术来试图解决这个问题,但我无法让它变得正确.Mootables是我发现的唯一这样做:http://joomlicious.com/mootable/ ,但我无法弄清楚他们是如何做到的.有谁知道如何使用我自己的表使用CSS和/或Javascript,或者Mootables如何做到这一点？

示例HTML:

    
Column 1
Column 2


   
this is the text in column one which wraps
   
this is the column two test

DavGarcia.. 94

在你的td上使用CSS属性white-space:nowrap和overflow:hidden.

更新

刚刚看到你的评论,不知道我在想什么,我这么做了很多次,我忘了我是怎么做的.这种方法在我的大多数浏览器中运行良好...而不是试图约束td,我在td中使用一个div来处理溢出实例.这有一个很好的副作用,能够将你的填充,边距,背景颜色等添加到你的div,而不是试图设置TD的样式.

    
Column 1
Column 2


   

    

        this is the text in column one which wraps
   

    

        this is the column two test

作为奖励,IE将使用浏览器特定的文本溢出:省略号样式在溢出的情况下放置省略号.有一种方法可以在FireFox中自动执行相同的操作,但我自己没有测试过.

更新2

我开始使用Justin Maxwell的截断代码几个月了,它在FireFox中也能正常工作.

在你的td上使用CSS属性white-space:nowrap和overflow:hidden.

更新

刚刚看到你的评论,不知道我在想什么,我这么做了很多次,我忘了我是怎么做的.这种方法在我的大多数浏览器中运行良好...而不是试图约束td,我在td中使用一个div来处理溢出实例.这有一个很好的副作用,能够将你的填充,边距,背景颜色等添加到你的div,而不是试图设置TD的样式.

    
Column 1
Column 2


   

    

        this is the text in column one which wraps
   

    

        this is the column two test

作为奖励,IE将使用浏览器特定的文本溢出:省略号样式在溢出的情况下放置省略号.有一种方法可以在FireFox中自动执行相同的操作,但我自己没有测试过.

更新2

我开始使用Justin Maxwell的截断代码几个月了,它在FireFox中也能正常工作.

这里的诀窍是使用深奥的table-layout:fixed规则

这个CSS应该对你的示例HTML起作用:

table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}

您还应该为s 指定显式列宽.

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

尝试:

td, th {
  white-space: nowrap;
  overflow: hidden;
}