CSS使用table-layout:fixed後導致儲存格寬度不受控制的問題解決

我遇到這個問題是由於我第一行有個儲存格佔了多列，fixed導致被占的列總是平均分配列寬。看看下面的說法，終於搞清楚原因了。
　　網頁上的表格如所示：

網頁代碼如下：

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

　　如果把table-layout:fixed的注釋去掉，表格就會變成如下樣子(注意看，4與5變成等寬的了)：

　　這是什麼原因呢？需要瞭解一下fixed布局模型的工作步驟：
1.width屬性值不是auto的所有列元素會根據width值設定該列的寬度.
2.如果一個列的寬度為auto---不過,表首行中位於該列的儲存格width不是auto---則根據該儲存格寬度設定此列的寬度.如果這個儲存格跨多列,則寬度在這些列上平均分配.
3.在以上兩步之後,如果列的寬度仍為auto,會自動確定其大小,使其寬度儘可能相等.此時,表的寬度設定為表的width值或列寬度之和(取其中較大者).如果表度度大於其列寬總和,將二者之差除以列數,再把得到的這個寬度增加到每一列上.
.........................................
　　這種方法的速度很快,因為所有列寬都由表的第一行定義.首行後所有行中的儲存格都根據首行所定義的列寬確定大小.後面這些行中的儲存格不會改變列寬.這意味著為這些儲存格指定的width值都會被忽略.

2010-09-13

　　這個問題比較好解決，可以把表格的第一行行高設定為1px，專門用來分配列寬。
　

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

然後把第一行加上class="first"。

　　當然，也可以通過不使用fixed屬性來解決。

轉帖人PS：這個問題不光會導致同一個table的列寬度無法控制，同樣也會導致兩個table的儲存格寬度不一致，比如一個table 四列，每一列25%，另一個table也是一樣，但是它第一行colspan了第二列到第四列，那麼兩個table的第一列寬度就不一致了（使用table-layout:fixed）。