0

我通过 JS 动态创建一个表格，表格布局和宽度都是固定的。并将列的宽度设置为以像素为单位的固定值。但是创建的表格并没有按照 IE7 中的意图呈现。似乎 col 中的 width 属性不起作用。但它适用于 FF 和 Chrome。

创建的表具有以下 dom 结构：

<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>

和CSS：

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;
}

演示

jsbin中的html

任何人都可以解释 IE7 中的行为吗？

4

0 回答 0