首頁  >  文章  >  web前端  >  CSS使用table-layout:fixed後導致單元格寬度不受控制的問題解決

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

黄舟
黄舟原創
2017-06-30 13:54:184831瀏覽

我遇到這個問題是由於我第一行有個單元格佔了多個列,fixed導致被佔的列總是平均分配列寬。看看下面的說法,終於搞清楚原因了。
  網頁上的表格如下圖:
CSS使用table-layout: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>


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

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


  這是什麼原因呢?需要了解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; 
   }

   然後把第一行加上cla​​ss="first"。

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

轉帖者PS:這個問題不光會導致同一個table的列寬度無法控制,同樣也會導致兩個table的單元格寬度不一致,例如一個table 四列,每一列25 %,另一個table也是一樣,但是它第一行colspan了第二列到第四列,那麼兩個table的第一列寬度就不一致了(使用table-layout:fixed)。


 

以上是CSS使用table-layout:fixed後導致單元格寬度不受控制的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn