09月13, 2014

熟悉而又陌生的table(续)

针对table中,单元格的内容过长是否会破坏table结构,是否会做截断,做了测试,总结的规律如下:

  1. table:fixed之后,指定col宽度,对td做 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 如果是在table上做,结构不会乱,但是超出宽度的不会被截断

  2. table:fixed之后,没有指定col宽度,默认每列的宽度为平均分

  3. 如果没有fixed,只指定col宽度,需要在td中加标签,一个block元素,p等,在p上做 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; },并且需要指定p的宽度,如100px,但宽度不能是%。

  4. 如果没有fixed,指定col了宽度,但没有在td中加标签,而是在td上做 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; },即使给td再指定宽度,如100px,也没有截断的效果。会破坏结构。如果不加那段代码,就会折行显示。

  5. 如果没有fixed,指定了col了宽度,也没有在td中加标签,而是在table上了加了 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;},那么超出指定宽度后就会结构乱掉,因为,不能换行(white-space: nowrap;)

另外:

  1. 表格还可以用ul,li来实现,每一行是一个li,每个单元格是一个span,对这个span设置display:inline-block

  2. 给表格的每行加下划线,必须加在td上,如果加在tr上,在ie7以下,就不显示了。

  3. 判断单元格内容是否为空,应该保留td标签,再进行判断。否则,会使一行的下划线不完整。

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文链接:https://imjiaolong.cn/post/2.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。