代码之家 › 专栏 › 技术社区 › Tomaka17

如何使用CSS将表格单元格限制为一行文本?

overflow html-table css

Tomaka17 · 技术社区 · 16 年前

我有一个用户表,其中每一行都包含他们的姓名、电子邮件地址等。对于某些用户,这一行是一个文本行高,对于其他一些两行,以此类推。但是我希望表的每一行是一个文本行高,截断其余的行。

white-space: nowrap . 但这不管用,也许我遗漏了什么。

因为我不能给你看代码,我重现了这个问题:

<style type="text/css">
td {
    white-space: nowrap;
    overflow: hidden;
    width: 125px;
    height: 25px;
}
</style>

<div style="width:500px">
<table>
    <tr>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
    </tr>
</table>
</div>

没有 white-space

但是使浏览器忽略 width 指令并增加表的宽度,直到所有数据都放在一行中。

我做错什么了?

5 回复 | 直到 9 年前

Mike Sherov 16 年前

只有当它知道从哪里开始考虑溢出时,溢出才会起作用。您需要设置 <td>

拿2块

table-layout: fixed; width:500px; 符合桌子的风格。

更新3

http://jsfiddle.net/e3Eqn/

Googuez 13 年前

将以下内容添加到样式表中:

table { white-space: nowrap; }

Himanshu gwell 10 年前

将以下内容添加到样式表中:

table{
     width: 500px; table-layout:fixed;
}

您需要添加表宽度,以确保下一个属性将使元素适合指定的大小。这里的table layout属性强制浏览器在给定的500像素范围内使用固定布局。

user2782717 11 年前

  <table border="1" style="width:200px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td nowrap="nowrap">
    
		Single line cell just do it</td>
   <td>
	
		multiple lines here just do it</div></td>
</tr>
</table>

以上代码用于

-1

pellul 7 年前

<table border="1" style="width:200px">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td nowrap="nowrap">Single line cell just do it</td>
    <td>multiple lines here just do it</td>
  </tr>
</table>