网页制作 TD也可以溢出隐藏显示

所属分类: 网页制作 / HTML/Xhtml 阅读数: 2107
收藏 0 赞 0 分享
或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了。

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

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

  言归正传:

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

  是的,事实确实如此,如:

提示:您可以先修改部分代码再运行

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

  看起来,这似乎是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,那么我们在固定宽度的单元格内再加一个标记元素呢?

最佳方案:

提示:您可以先修改部分代码再运行

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

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

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

  之后会继续写一些关于table的文章,也作自娱之用。
更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多