|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
通过大家的心得，或许能找出"怎么学html5"这个问题的答案。另，我会不定期把群里面关于技术的讨论贴到本帖，敬请关注。网页制造poluoluo文章简介：转头来看看Table：TD也玩overflow:hidden.
也许我这篇文章一取如许的名字，就会有人要问了：你怎样还在存眷table啊，那早就过期了…赶忙Xhtml…div好…ul好…ol好…dl好…完了，不晓得另有甚么好了。
table真的过期了么？你真的懂得table么？你真的会用table么？
打口水仗不是我们要做的，留给那些工夫很丰裕的人吧。
言回正传：
不记得是甚么时分，有人在用table摹拟DataGrid的时分说，为何td超越设置为流动宽度的笔墨不克不及埋没，而是会间接换行呢？
是的，现实的确云云，如：
<styletype="text/CSS">
table{width:500px;table-layout:fixed;}
.col1{width:100px;}
.col2{width:200px;}
.col3{width:200px;}
td{white-space:nowrap;overflow:hidden;}
</style>
<tableborder="1"cellspacing="0"summary="转头来看看Table：TD也玩overflow:hidden">
<tr>
<tdclass="col1">神船文雅Q400N</td>
<tdclass="col2">文雅Q400N，接纳IntelCore2Duo(Merom)T5450(1.66G)处置器</td>
<tdclass="col3">迅驰4平台，凸起的性价比，大度的表面</td>
</tr>
</table>
运转如上代码，你会发明单位格里凌驾流动宽度的笔墨不会被埋没失落，而是换行显现了，明显，这并非我的本意。
看起来，这仿佛是table的一个特征，它不克不及很好的撑持{width:*px;white-space:nowrap;overflow:hidden;}的组合，说究竟就是white-space:nowrap这个东东没起感化，以是看起来overflow:hidden就生效了。{注：假如是连续串的偶然义字符则可失效，比方：<tdclass="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，这个时分就不必要{white-space:nowrap}来强迫它在一行内显现，由于这连续串的a会被认定为是一个字而不产生换行，从而超越.col1宽度的a会被埋没}
［办理计划一：］
厥后有人提到利用百分比宽度就能够了，经测试，的确能够，略微将第一段的个中几行款式修正一下，别的的稳定：
.col1{width:20%;}
.col2{width:40%;}
.col3{width:40%;}
将修正后的代码运转后，会发明，超越宽度的笔墨公然被埋没了，想要的效果仿佛失掉了。
现实上利用百分比宽度的确能够办理这个笔墨埋没的成绩，但这仿佛并非想要的最好的办理计划，由于有的时分我们必要的是一个流动的宽度，而不是百分比宽度。
而这统统的本源就在于怎样使得单位格内的笔墨不换行在一行内显现。
［办理计划二：］
要到达这个请求，除利用款式，我们大概还会想到一个好久不必了的标签<nobr>，这个元素的感化就是强迫内容在一行显现。以上代码做以下修正，别的则稳定：
<tableborder="1"cellspacing="0"summary="转头来看看Table：TD也玩overflow:hidden">
<tr>
<tdclass="col1"><nobr>神船文雅Q400N</nobr></td>
<tdclass="col2"><nobr>文雅Q400N，接纳IntelCore2Duo(Merom)T5450(1.66G)处置器</nobr></td>
<tdclass="col3"><nobr>迅驰4平台，凸起的性价比，大度的表面</nobr></td>
</tr>
</table>
做了这个修正，会发明，效果的确到达，是否是该镇静呢？不，这仿佛还不是最好的办理计划，由于究竟利用了一个好久不必且不保举利用的元素标志，这几让人以为有点不爽。
沿着这个思绪，我换了一个角度来思索这个成绩，发明成绩水到渠成。
既然在流动宽度的单位格内没法只复杂的给th,td加上white-space:nowrap，那末我们在流动宽度的单位格内再加一个标志元素呢？
最好计划：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<title>转头来看看Table：TD也玩overflow:hidden</title>
<styletype="text/css">
table{width:500px;table-layout:fixed;}
.col1{width:100px;}
.col2{width:200px;}
.col3{width:200px;}
thstrong{display:block;width:100%;}
trstrong,trtd{white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<tableborder="1"cellspacing="0"summary="测试">
<thead>
<tr>
<thclass="col1"><strong>产物称号</strong></th>
<thclass="col2"><strong>产物先容</strong></th>
<thclass="col3"><strong>产物备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神船文雅Q400N</td>
<td>文雅Q400N，2007年7月上市，接纳IntelCore2Duo(Merom)T5450(1.66G)处置器</td>
<td>迅驰4平台，凸起的性价比，大度的表面</td>
</tr>
</tbody>
</table>
</body>
</html>
运转下面的代码，会发明如许的做法是能够的，并且从代码的简便性、可读性和公道性几方面来讲，都较前几种计划为好。
{还没有做过给单位格埋没凌驾流动宽度内容的同砚，可先在呆板上玩玩，然后再来看本文}
实在table是一个风趣，可玩性很高东东。我们不该该带着有色眼睛往看它，由于它有它存在的事理。
以后会持续写一些关于table的文章，也作自娱之用。
</p>
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展. |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:18:03
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主
窥视卡
雷达卡
发表于 2015-2-18 05:49:16