固定宽度表格布局设定宽度问题

近日做  GridLite 轻量级的Ext Grid 的列宽拖放调整时遇到了一点小问题，记一下呵

 

首先看下面一段代码：

 

动态生成一个 table-layout:fixed 的表格 (某一列内容很多不换行，并设置该列宽度)，然后待table渲染后再设置整个 table的css宽度。

 

table.gridLite {
	border-collapse:collapse;
	table-layout:fixed;
	text-align:left;
	border:1px solid #D0D0D0;
	font-size:12px;
}


.x-grid3-hd-inner {
       overflow:hidden;
       white-space:nowrap;

}
.x-grid3-cell {
       overflow:hidden;
}


var table2 = Ext.DomHelper.append(document.body, {
    tag: 'table',
    cls: 'gridLite',
    cellspacing: "0",
    cellpadding: "0",
    //放其后设置 固定表格布局在 firefox 和 chrome 中失效 !!!
    //style:'width:800px',
    cn: [{
        tag: 'caption',
        html: 'test'
    },
    {
        tag: 'colgroup',
        cn: [{
            tag: 'col'
        },
        {
            tag: 'col'
        }]
    },
    {
        tag: 'thead',
        cn: [{
            tag: 'tr',
            cn: [{
                tag: 'th',
                cls: 'x-grid3-cell',
                style: 'width:21px;',
                cn: [{
                    tag: 'div',
                    cls: "x-grid3-hd-inner",
                    html: ' '
                }]
            },
            {
                tag: 'th',
                cls: 'x-grid3-cell',
                style: 'width:50px;',
                cn: [{
                    tag: 'div',
                    cls: 'x-grid3-hd-inner',
                    html: '我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们'
                }]
            },
            {
                tag: 'th',
                cls: 'x-grid3-cell',
                cn: [{
                    tag: 'div',
                    cls: 'x-grid3-hd-inner',
                    html: '1'
                }]
            }]
        }]
    }]
},
true);
//放其后设置 固定表格布局在 firefox 和 chrome 中失效 !!!ie opera 可行
table2.setStyle({
    width: '800px'
});

 

 

效果：

 

IE.Opera :

 

Firefox .Chrome

 

若把css width 创建表格时初始设置，则各个浏览器没有区别。

 

确实这方面标准没有规定，其实 firefox ，chrome 在初始没有设定css width时，即使设了 固定宽度表格布局，它们仍是按照自由宽度表格布局来处理的，后期设了表格宽度也没用了。(关于 自由宽度表格布局列宽度计算，有兴趣可以查阅 css权威指南 表的自动布局，很复杂 )

所以最好 table-layout:fixed 和 width 成对出现，可以设个默认值 100%  (后期可以再更改)：

 

table.gridLite {
	border-collapse:collapse;
	table-layout:fixed;
	text-align:left;
	border:1px solid #D0D0D0;
	font-size:12px;
	/*fixed width 成对设置，否则部分浏览器会当做 自动宽度布局模型*/
	width:100%;
}

 

 

以下引自：css权威指南

注意：使用固定宽度布局模型时，没有必要非得为表指定一个显示宽度，不过如果指定一个宽度确实有帮助。不过这不是必要的。 用户代理也可以使用自动宽度布局模型对width值为auto的表完成布局。

 

评论

1 楼 edokeh 2009-08-24  

设置成100%也有问题
据我测试，在IE6/7下，为table设置width为100%，如果外部的div又设置了overflow:auto，那么表格会认为这个100%的宽度是包含滚动条的div宽度,但在IE8和FF下则是不含滚动条的宽度