CSS uses style table-layout:fixed after the cell width setting is resolved

The following code, after using table-layout:fixed, intended to keep the width of the cell in effect, test in IE, the width setting is invalid:

<table style= "table-layout:fixed;width:200px" border= "1" cellspacing= "1" cellpadding= "1" >  <tr>    <td style= "width:100px" >1</td>    <td colspan= "2" >2</td>  </tr>  < tr>    <td>1.1</td>    <td style= "width:80px" >2.1</td>    <td style= "width:20px ">2.2</td>  </tr></table>

Here is the workaround, after the table-layout:fixed style is used, except for the first row, the width of the cell in the remaining row is set according to the cell width in the first row, so we set a hidden line to specify the width:

<table style= "table-layout:fixed;width:200px" border= "1" cellspacing= "1" cellpadding= "1" ><tr style= " Display:none ">  <td style=" width:100px "></td>  <td style=" width:80px "></td>  <td style= "width:20px" ></td></tr><tr>  <td>1</td>  <td colspan = "2" >2</td></tr><tr>  <td>1.1</td>  <td>2.1</td>  <td >2.2</td></tr></table>

This method can be displayed correctly in Ie6,ie7,ie8, but it doesn't work in non-ie. Here's another way to do this:

<style>td{border:1px solid Red;} </style><table style= "table-layout:fixed;width:200px" border= "0" cellspacing= "1" cellpadding= "1" >< TR style= "height:0;" > <th style= "width:100px" ></th> <th style= "width:80px" ></th> <th style= "width:20px" ></th></tr><tr> <td>1</td> <td colspan= "2" >2</td></tr><tr > <td>1.1</td> <td>2.1</td> <td>2.2</td></tr></table>