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

這個方法，在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>