Solving the problem of uncontrolled cell width after using table-layout:fixed in CSS

I encountered this problem because there was a cell in my first row that occupied multiple columns. Fixed caused the occupied columns to always distribute the column width evenly. Take a look at the statement below and finally understand the reason.
The table on the web page is as shown below:

The web 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="400" 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="400" 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 put the table -Remove the comment of -layout:fixed, and the table will become as follows (note that 4 and 5 have become equal width):

This is What's the reason? You need to understand the working steps of the fixed layout model:
1. All column elements whose width attribute value is not auto will set the width of the column according to the width value.
2. If the width of a column is auto---but , if the width of the cell located in this column in the first row of the table is not auto---the width of this column is set according to the width of the cell. If this cell spans multiple columns, the width is evenly distributed across these columns.
3 .After the above two steps, if the width of the column is still auto, its size will be automatically determined so that its width is as equal as possible. At this time, the width of the table is set to the width value of the table or the sum of the column widths (whichever is larger (or). If the table width is greater than the sum of its column widths, divide the difference by the number of columns, and then add the resulting width to each column.
............ ........................
This method is very fast because all column widths are determined by the first column of the table. Row definition. The cells in all rows after the first row are sized according to the column width defined in the first row. The cells in these subsequent rows will not change the column width. This means that the width value specified for these cells will be Ignore.

2010-09-13

This problem is easier to solve. You can set the height of the first row of the table to 1px, which is specially used to allocate column widths. .
　

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

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

Of course, this can also be solved by not using the fixed attribute.

PS: This problem will not only cause the column width of the same table to be uncontrollable, but also cause the cell widths of two tables to be inconsistent. For example, a table has four columns, each column is 25 %, the same is true for another table, but its first row colspans the second to fourth columns, so the width of the first column of the two tables is inconsistent (use table-layout:fixed).

The above is the detailed content of Solving the problem of uncontrolled cell width after using table-layout:fixed in CSS. For more information, please follow other related articles on the PHP Chinese website!