Javascript 在IE7中动态创建具有固定列宽度的表
我用JS动态创建了一个表,表的布局和宽度都是固定的。还可以将列的宽度设置为以像素为单位的固定值。但创建的表并没有按照IE7中的意图呈现。col中的width属性似乎不起作用。但它在FF和Chrome中都能工作 创建的表具有以下dom结构:Javascript 在IE7中动态创建具有固定列宽度的表,javascript,html,internet-explorer,html-table,fixed-width,Javascript,Html,Internet Explorer,Html Table,Fixed Width,我用JS动态创建了一个表,表的布局和宽度都是固定的。还可以将列的宽度设置为以像素为单位的固定值。但创建的表并没有按照IE7中的意图呈现。col中的width属性似乎不起作用。但它在FF和Chrome中都能工作 创建的表具有以下dom结构: <table id="dynamicTable" cellspacing="0" width="282px" style="table-layout: fixed; overflow: hidden;"> <colgroup>
<table id="dynamicTable" cellspacing="0" width="282px" style="table-layout: fixed; overflow: hidden;">
<colgroup>
<col width="129px">
<col width="76px">
<col width="76px">
</colgroup>
<tbody>
<tr><td>head1-1</td><td>head1-2</td><td>head1-3</td></tr>
<tr><td colspan="2">head2-1,2</td><td>head2-3</td></tr>
<tr><td>head3-1</td><td>head3-2</td><td>head3-3</td></tr>
</tbody>
</table>
演示
有人能解释IE7中的行为吗
table layout:fixed
在IE7Col中不受支持IE7中的col width指定为content width,而在其他浏览器中它指定为sum(content width+border width+padding width)。在上面的表结构中,行的计数宽度大于表的宽度。这可能就是问题的原因。
table {
border-style: solid solid none none;
border-width: 1px;
border-color: #c0c0c0;
}
td {
border-style: none none solid solid;
border-width: 0 0 5px 5px;
border-color: #000 #000 #c0c0c0 #c0c0c0;
padding: 10px;
margin: 0;
}
#dynamicTable {
background-color: #eee;
}