熟悉而又陌生的table(续)

来源:互联网 发布:淘宝报活动技巧 编辑:程序博客网 时间:2024/04/29 18:54

针对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标签,再进行判断。否则,会使一行的下划线不完整。

0 0