全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
网站制作
网页制作 TD也可以溢出隐藏显示
时间:1970-01-01 来源:互联网 作者:佚名
或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注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;} </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的文章,也作自娱之用。
来顶一下
返回首页
推荐资讯
从零开始学ASP.NET-基础篇第1/7页
第一天 学习目的: 掌握最基本的Label、TextBox、Button控件
ASP.NET入门数据篇
对于网站编程的初学者来说,总是会上网找些源码来看,但久而
相关文章
gridview+objectdatasource+aspnetpager整合实例
动态指定任意类型的ObjectDataSource对象的查询参数
asp.net 使用Silverlight操作ASPNETDB数据库
Cannot use object of type stdClass as array
Linux系统下MTD/CFI驱动介绍
PHP Fatal error: Cannot use object of type stdClas
Linux系统下MTD/CFI驱动介绍
apache提示:错误应用程序 httpd.exe,版本 2.2.22.0,
JTDS连接SQL Server中的方法示例
html中DTD使用小结
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
天府快车
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058