关于网页制作 TD也可以溢出隐藏显示
来源:学问馆 本文已影响2.08W人
来源:学问馆 本文已影响2.08W人
或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了。
table真的过时了么?你真的了解table么?你真的会用table么?
打口水仗不是我们要做的,留给那些时间很充裕的人吧。
言归正传:
不记得是什么时候,有人在用table模拟DataGrid的时候说,为什么td超出设置为固定宽度的文字不能隐藏,而是会直接换行呢?
是的,事实确实如此,如:
table {width:500px;table-layout:fixed;} 1 {width:100px;} 2 {width:200px;} 3 {width:200px;} td {white-space:nowrap;overflow:hidden;}
神舟 优雅Q400N | 优雅Q400N,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器 | 迅驰4平台,突出的性价比,漂亮的外观 |
提示:您可以先修改部分代码再运行
运行如上代码,你会发现单元格里超过固定宽度的文字不会被隐藏掉,而是换行显示了,显然,这并不是我的本意。
看起来,这似乎是table的一个特性,它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合,说到底就是white-space:nowrap这个东东没起作用,所以看起来overflow:hidden就失效了。{注:如果是一连串的无意义字符则可生效,例如:
,这个时候就不需要{white-space:nowrap}来强制它在一行内显示,因为这一连串的a会被认定为是一个字而不发生换行,从而超出1宽度的a会被隐藏}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
[解决方案一:]
后来有人提到使用百分比宽度就可以了,经测试,确实可以,稍微将第一段的其中几行样式修改一下,其它的不变:
1 {width:20%;}
2 {width:40%;}
3 {width:40%;}
将修改后的代码运行后,会发现,超出宽度的文字果然被隐藏了,想要的.效果似乎得到了。
事实上使用百分比宽度确实可以解决这个文字隐藏的问题,但这似乎并不是想要的最佳的解决方案,因为有的时候我们需要的是一个固定的宽度,而不是百分比宽度。
而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。
[解决方案二:]
要达到这个要求,除了使用样式,我们也许还会想到一个许久不用了的标签,这个元素的作用就是强制内容在一行显示。以上代码做如下修改,其它则不变:
做了这个修改,会发现,效果确实达到,是不是该兴奋呢?不,这似乎还不是最佳的解决方案,因为毕竟使用了一个许久不用且不推荐使用的元素标记,这多少让人觉得有点不爽。
沿着这个思路,我换了一个角度来考虑这个问题,发现问题迎刃而解。
既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap,那么我们在固定宽度的单元格内再加一个标记元素呢?
最佳方案:
table {width:500px;table-layout:fixed;} 1 {width:100px;} 2 {width:200px;} 3 {width:200px;} th strong {display:block;width:100%;} tr strong,tr td {white-space:nowrap;overflow:hidden;}
产品名称 | 产品介绍 | 产品备注 |
---|---|---|
神舟 优雅Q400N | 优雅Q400N,2007年7月上市,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器 | 迅驰4平台,突出的性价比,漂亮的外观 |
提示:您可以先修改部分代码再运行
运行上面的代码,会发现这样的做法是可以的,而且从代码的简洁性、可读性和合理性几方面来说,都较前几种方案为好。
{还没有做过给单元格隐藏超过固定宽度内容的同学,可先在机器上玩玩,然后再来看本文}
其实table是一个有趣,可玩性很高东东。我们不应该带着有色眼睛去看它,因为它有它存在的道理。
之后会继续写一些关于table的文章,也作自娱之用。
面试时,你可以张扬,也可以低调,但不要一味克制和强装
CSS制作网页的类以及ids的命名
为 1024 × 768 像素的显示屏设计网页时需要把设计师的屏幕也调成这个大小吗?
网页设计基础:如果你想学网页制作
关于网页制作合同三篇
LED显示屏制作教程3篇
隐藏文件夹方法-文件夹加密及显示隐藏文件夹方法
QQ空间总提示“无法显示该网页”的解决方法
BAT之后互联网创业现在也要选择站TMD的队了吗
关于网页制作合同3篇
找网页设计工作不会html.css.只会Photoshop可以吗?
毕业论文word技巧:页眉显示不同内容
关于制作网页十大诀窍
网页字体在Frontpage2000制作网页过程中的使用方法
手机游戏开心消消乐隐藏关卡怎么开 隐藏关卡大揭秘
dnf劳动节隐藏装扮神秘礼盒
不参加高考也可以选择出国留学
Android 个人理财工具显示账单明细
有关网页制作合同3篇
用CorelDraw制作因特网页方法介绍
公司是否可以以“隐婚”为由 ..
ATI显卡设置宽屏显示的比例解决方法介绍
application data文件夹可以删除吗
2007excel中隐藏的简历表格怎么显示
3dtouch怎么用-3Dtouch还可以这样用
关于Turbo C在图形状态下快速显示彩色汉字的方法
网页显示不出图片怎么办
有关网页制作合同4篇
在银行存款余额里可以显示长期应付账款吗?
非会员如何免费设置QQ过滤广告与不显示腾讯网迷你首页
网站首页Title的编写技巧分享
T门户网站 招网页设计师
面试也有这些隐藏技巧
无线网络如何隐藏电脑
国内的网游项目也可以走公众募资这条路么?
DIV CSS制作网页时易犯的错误总结
放弃也可以成功作文
KTV的软件可以互联网化吗?
关于网页制作之学习CSS的理由
不发外链照样也可以做好网站推广
javascript控制页面控件隐藏显示的两种方法