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

ExtGrid列宽调整

最新推荐文章于 2022-11-29 15:55:34 发布

最新推荐文章于 2022-11-29 15:55:34 发布 · 286 阅读

文章标签：

#Chrome #Firefox #CSS #IE #EXT

xhtml / css 专栏收录该内容

47 篇文章

订阅专栏

解决GridLite轻量级ExtGrid的列宽拖放调整问题，介绍了一种在不同浏览器下保持一致表现的方法。

近日做 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: '&nbsp;'
                }]
            },
            {
                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的表完成布局。