网页页面制做 TD还可以外溢掩藏显示信息

也许我这篇文章内容1取这样的姓名,就会有人要问了:你如何还在关心table啊,那早就落伍了…赶快Xhtml…div好…ul好…ol好…dl好…完了,不知道道也有甚么好了。

  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的文章内容,也作自娱之用。