0

I create a table dynamically by JS with table-layout and width both fixed. And also set the columns' width to a fixed value in pixels. But the created table is not rendered according to the intention in IE7.It seems width property in col doesn't work. But it works both in FF and Chrome.

The created table with following dom structure:

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

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

DEMO

html in jsbin

Can anybody explain the behavior in IE7?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ltang
  • 11
  • 3
  • `table-layout: fixed` isn't supported in IE7 – Herr_Schwabullek Aug 16 '13 at 10:21
  • Col width in IE7 is specified to content width, while in other browsers it specified to sum(content width + border width + padding width). In above table's structure, row's count width is larger than table's width. That may be the reason for the issue. – ltang Aug 19 '13 at 08:48

0 Answers0