Solution to the invalid cell width setting after setting table-layout:fixed in css table

After setting the table-layer:fixed style on the settingtable, it was found that one row in the table has been merged, otherthe column widths of the unmerged rows will be averaged, and the column widths will be averaged. Wide settings will fail. There are detailed solutions below. You can learn from them. After setting the table-layer:fixed style on the setting table, I found that one row in the table had been merged, and the column widths of other unmerged rows would be averaged, and the column width settings would be invalid. If the merged rows of the table are removed, it can be displayed normally.

Reason: table-layout: For a fixed table, the width of each column is determined by the first row, and the width specified later will be ignored. You merged the first row, so the column widths are evenly divided.

Solution one:

Add

before tbody. The code is as follows:

<col style="width: 60%" /> 
<col style="width: 20%" /> 
<col style="width: 20%" />

Solution two:
Set a hidden one line to specify the width:

The code is as follows:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cell
padding
="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, and IE8, but it has no effect in non-IE. Another method is given below:

The code is as follows:

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

The above is the detailed content of Solution to the invalid cell width setting after setting table-layout:fixed in css table. For more information, please follow other related articles on the PHP Chinese website!