The problem that CSS uses table-layout:fixed causes the cell width not to be controlled is solved

I encountered this problem because my first row had a cell that accounted for more than one column, and the fixed result was that the occupied column always distributes the column widths evenly. Take a look at the following statement and finally figure out why.
The table on the Web page looks like this:

The page code is as follows:

<style type= "Text/css" >      table{      border-collapse:collapse;      /*table-layout:fixed;*/      }      table,table td{          border-color:blue;      }  </style>  <table width= "border=" 1 "style=" Border-color:blue;border-collapse:collapse ">  <tr>  <td width= "50%" >1</td><td colspan= "2" >2</td>  </tr>  < tr>  <td>3</td><td width= "10%" >4</td><td width= "40%" >5</td>  < /tr>  <tr>  <td colspan= "3" >http://wallimn.iteye.com</td>  </tr>  </table>

<style type= "Text/css" >table{border-collapse:collapse;/*table-layout:fixed;*/}table,table Td{border-color: Blue;} </style><table width= "border=" 1 "style=" Border-color:blue;border-collapse:collapse "><tr> <TD width= "50%" >1</td><td colspan= "2" >2</td></tr><tr><td>3</td> <TD width= "10%" >4</td><td width= "40%" >5</td></tr><tr><td colspan= "3" > Http://wallimn.iteye.com</td></tr></table>

If you remove the table-layout:fixed annotation, the table will look like this (note that 4 and 5 become equal width):

What is the reason for this? You need to understand the working steps of the fixed layout model:
All column elements with a 1.width property value other than auto set the width of the column based on the width value.
2. If the width of a column is auto---however, the cell width in the first row of the table is not auto---the width of the column is set based on that cell's widths. If the cell spans multiple columns, the width is evenly distributed across the columns.
3. After these two steps, if the width of the column is still auto, its size is automatically determined so that its width is as equal as possible. At this point, the width of the table is set to the sum of the width or column widths of the table (whichever is larger). If the degree of the table is greater than its column width, divide the difference The resulting width is then added to each column.
.........................................
This method is very fast because all column widths are defined by the first row of the table. The cells in all rows after the first row are determined by the column width defined by the first row. The cells in the subsequent rows do not change the column width. This means that the width values specified for these cells are ignored.

2010-09-13

This problem is better solved, you can set the first row of the table row height of 1px, specifically to allocate the column width.
　

tr.first{      height:1px;      font-size:1px;      line-height:1px;    }

Then add class= "first" to the top line.

Of course, it can also be resolved by not using the fixed attribute.

Reprint PS: This problem not only causes the column widths of the same table to be uncontrollable, but also causes two table cell widths to be inconsistent, such as a table four column, each column 25%, and the other table, but its first row colspan the second column to the fourth column. Then the width of the first column of the two table is inconsistent (using table-layout:fixed).