css表格設定table-layout:fixed後對儲存格寬度設定無效的解決辦法

在設定表格設定table-layer:fixed樣式後，發現表格中有一行合併過，其它沒有合併的行的列寬會平均化，對列寬的設定會失效，下面有詳細的解決方法，大家可以學習學習 在設定表格設定table-layer:fixed樣式後，發現表格中有一行合併過，其它沒有合併的行的列寬會平均化，對列寬的設定會失效。如果把表格的合併行去掉，又能正常顯示。

原因：table-layout: fixed 的表格，各列寬度由第一行決定，後面指定的寬度會被忽略。你第一行合併了，所以各列寬度均分了。

解決方法一：

在tbody前面加上

#程式碼如下:

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

解決方法二：
設定一個隱藏的行來規定寬度： 

程式碼如下:

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

這個方法，在IE6,IE7，IE8中都可以正確地顯示，但在非IE中，是沒起作用的。下面給出另外一種方法：

程式碼如下:

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

#

以上是css表格設定table-layout:fixed後對儲存格寬度設定無效的解決辦法的詳細內容。更多資訊請關注PHP中文網其他相關文章！