怎么用CSS/Javascript强制html表格列在一行上?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (12)

一个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技术来尝试实现这个目标,但是我无法让它变得正确。Mootable是我发现的唯一能做到这一点的东西,但我不知道他们是怎么做到的。有人知道我如何使用我自己的表使用CSS或Javascript,或者Mootable是如何实现的吗?

示例HTML:

<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>
提问于
用户回答回答于

这里的技巧是用的table-layout:fixed

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

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

还应该为<td>指定明确的列宽

table-layout:fixed的规则是”这个表格的单元格宽度取决于我说的内容,而不是单元格中的实际内容“

这通常很有用,因为浏览器可以在接收到第一个<tr>之后开始显示表格,否则浏览器必须在计算列宽之前接收整个表。

扫码关注云+社区