或许我这篇文章一取这样的名字，就会有人要问了：你怎么还在关注table啊，那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了，不知道还有什么好了。

　　table真的过时了么？你真的了解table么？你真的会用table么？

　　打口水仗不是我们要做的，留给那些时间很充裕的人吧。

　　言归正传：

　　不记得是什么时候，有人在用table模拟DataGrid的时候说，为什么td超出设置为固定宽度的文字不能隐藏，而是会直接换行呢？

　　是的，事实确实如此，如：

<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
 <tr>
  <td class="col1">神舟 优雅Q400N</td>
  <td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
  <td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
 </tr>
</table>

　　运行如上代码，你会发现单元格里超过固定宽度的文字不会被隐藏掉，而是换行显示了，显然，这并不是我的本意。

　　看起来，这似乎是table的一个特性，它不能很好的支持{width:*px;white- space:nowrap;overflow:hidden;}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来 overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏}

　　［解决方案一：］

　　后来有人提到使用百分比宽度就可以了，经测试，确实可以，稍微将第一段的其中几行样式修改一下，其它的不变：

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

　　将修改后的代码运行后，会发现，超出宽度的文字果然被隐藏了，想要的效果似乎得到了。

　　事实上使用百分比宽度确实可以解决这个文字隐藏的问题，但这似乎并不是想要的最佳的解决方案，因为有的时候我们需要的是一个固定的宽度，而不是百分比宽度。

　　而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。

　　［解决方案二：］

　　要达到这个要求，除了使用样式，我们也许还会想到一个许久不用了的标签<nobr>，这个元素的作用就是强制内容在一行显示。以上代码做如下修改，其它则不变：

<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
 <tr>
  <td class="col1"><nobr>神舟 优雅Q400N</nobr></td>
  <td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
  <td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td>
 </tr>
</table>

　　做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。

　　沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。

　　既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？

最佳方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
 <tr>
  <th class="col1"><strong>产品名称</strong></th>
  <th class="col2"><strong>产品介绍</strong></th>
  <th class="col3"><strong>产品备注</strong></th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>神舟 优雅Q400N</td>
  <td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
  <td>迅驰4平台，突出的性价比，漂亮的外观</td>
 </tr>
</tbody>
</table>
</body>
</html>

　　运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

　　{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}

　　其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。

　　之后会继续写一些关于table的文章，也作自娱之用。

td也可以溢出隐藏显示的更多相关文章

  1. 网页制作教程:td也可以溢出隐藏显示【转】

    原文发布时间为:2010-02-05 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri ...

  2. 多行溢出隐藏显示省略号功能的JS实现

    在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...

  3. text-overflow文本溢出隐藏“...”显示

    一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...

  4. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  5. （有趣）chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug

    项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧widt ...

  6. td 不换行 隐藏显示多余的部分(转)

    转自:http://sha-tians.iteye.com/blog/1996162 table中td固定宽度后overflow:hidden不生效的问题 博客分类: html/css/js   前两 ...

  7. ant Table td 溢出隐藏（省略号）

    1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...

  8. CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  9. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

随机推荐

  1. 《ASP.NET1200例》<ItemTemplate>标签在html里面有什么具体的作用

    严格的来说 <ItemTemplate> 在html中无意义,他只是针对诸如 Repeater.DataList.GridView中的一个模板 至于里面的含义,你可以这样想,既然Repea ...

  2. 【转】mybatis实战教程(mybatis in action)之八:mybatis 动态sql语句

    转自:除非申明,文章均为一号门原创,转载请注明本文地址,谢谢! 转载地址:http://blog.csdn.net/kutejava/article/details/9164353#t5 1. if ...

  3. Eclipse 输入提示设置

    提升eclipse工具的效率是提升开发效率很重要的一个环节,然而java函数之多你不可能完全记住.eclipse默认打个“.”号后会有相应的提示,然而这略显笨拙.只需要对eclipse进行简单的配置便 ...

  4. 2.saltstack笔记之目标，模块，返回写入数据库

    作者:刘耀 QQ:22102107 一.目标(targeting Minions) 1.匹配Minions Id 匹配所有 (*) [root@node1 salt]# salt '*' test.p ...

  5. Windows下安装Cygwin及包管理器apt-cyg（转）

    本文为转载文章: http://www.2cto.com/os/201212/176551.html Cygwin可以在Windows下使用unix环境Bash和各种功能强大的工具,对于Linux管理 ...

  6. mybatis 如何查找表里的某一个字段，然后返回它们的结果集list ?

    <select id="findArgByParams" resultType="string" parameterType="map" ...

  7. CodeIgniter - 数据库的增删改查

    数据库操作无非是CRUD,用非装逼的语言来说就是增删改查.也许这一节会讲的很泛泛,或者很多人看不懂,没关系,大致的看看,知道是这么回事就好,继续往后看,后面会讲实例,这些枯燥而又抽象的东西可以先跳过, ...

  8. hdu 1010:Tempter of the Bone（DFS + 奇偶剪枝）

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  9. Android适配器之ArrayAdapter、SimpleAdapter和BaseAdapter的简单用法与有用代码片段（转）

    摘自:http://blog.csdn.net/shakespeare001/article/details/7926783 Adapter是连接后端数据和前端显示的适配器接口,是数据Data和UI( ...

  10. ListView系列（七）——Adapter内的onItemClick监听器四个arg参数 (转)

    举个例子你会理解的更快:X, Y两个listview,X里有1,2,3,4这4个item,Y里有a,b,c,d这4个item.如果你点了b这个item.如下: public void onItemCl ...