table真的落伍了么?你真的掌握table么?你真的会用table么?
打口水仗并不是大家要做的,留给那些時间很充足的人吧。
言归正传:
不记得是何时,有人在用table仿真模拟DataGrid的情况下说,为何td超过设定为固定不动宽度的文本不可以掩藏,而是会立即换行呢?
是的,客观事实的确这般,如:
提醒:您能够先改动一部分编码再运作
运作如上编码,你会发现模块格里超出固定不动宽度的文本不容易被掩藏掉,而是换行显示信息了,明显,这其实不是我的原意。
看起来,这好像是table的1个特点,它不可以很好的适用{width:*px;white-space:nowrap;overflow:hidden;}的组成,归根结底便是white-space:nowrap这个东东没起功效,因此看起来overflow:hidden就无效了。{注:假如是1连串的不经意义标识符则可起效,比如:<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>,这个情况下就不必须{white-space:nowrap}来强制性它在1行内显示信息,由于这1连串的a会被评定为是1个字而不产生换行,从而超过.col1宽度的a会被掩藏}
[处理计划方案1:]
后来有人提到应用百分比宽度便可以了,经检测,的确能够,略微将第1段的在其中几行款式改动1下,其它的不会改变:
.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}
将改动后的编码运作后,会发现,超过宽度的文本果真被掩藏了,要想的实际效果好像获得了。
客观事实上应用百分比宽度的确能够处理这个文本掩藏的难题,但这好像其实不是要想的最好的处理计划方案,由于有的情况下大家必须的是1个固定不动的宽度,而并不是百分比宽度。
而这1切的根本原因就在于怎样使得模块格内的文本不换行在1行内显示信息。
[处理计划方案2:]
要做到这个规定,除应用款式,大家或许还会想起1个好久无需了的标识<nobr>,这个元素的功效便是强制性內容在1行显示信息。以上编码做以下改动,其它则不会改变:
<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>
做了这个改动,会发现,实际效果的确做到,是否该激动呢?不,这好像还并不是最好的处理计划方案,由于终究应用了1个好久无需且不强烈推荐应用的元素标识,这是多少令人感觉有点不爽。
沿着这个思路,我换了1个角度来考虑到这个难题,发现难题得到解决。
既然在固定不动宽度的模块格内没法只简易的给th,td再加white-space:nowrap,那末大家在固定不动宽度的模块格内再加1个标识元素呢?
最好计划方案:
提醒:您能够先改动一部分编码再运作
运作上面的编码,会发现这样的做法是能够的,并且从编码的简约性、可读性和有效性几层面来讲,都较前几种计划方案为好。
{都还没做过给模块格掩藏超出固定不动宽度內容的同学,可先在设备上玩玩,随后再看来本文}
实际上table是1个趣味,可玩性很高东东。大家不可该带着有色双眼去看它,由于它有它存在的道理。
以后会再次写1些有关table的文章内容,也作自娱之用。