table css樣式設定中的寬度設定

在對table進行樣式設定的過程中,有些時候會發覺表格樣式設定了,但樣式卻會自適應或不改變,利用table-layout:fixed;可以在有效範圍內改變一些表格樣式,但在實際應用中,很多樣式還是不能改變。實際上,還是這個屬性的原因:先了解一下fixed佈局模型的工作步驟:
1.width屬性值不是auto的所有列元素會根據width值設置該列的寬度.
2.如果一個列的寬度爲auto---但是,表首行中位於該列的單元格width不是auto---則根據該單元格寬度設置此列的寬度.如果這個單元格跨多列,則寬度在這些列上平均分配.
3.在以上兩步之後,如果列的寬度仍爲auto,會自動確定其大小,使其寬度儘可能相等.此時,表的寬度設置爲表的width值或列寬度之和(取其中較大者).如果表度度大於其列寬總和,將二者之差除以列數,再把得到的這個寬度增加到每一列上.
.........................................
  這種方法的速度很快,因爲所有列寬都由表的第一行定義.首行後所有行中的單元格都根據首行所定義的列寬確定大小.後面這些行中的單元格不會改變列寬.這意味着爲這些單元格指定的width值都會被忽略.

這就是導致表格寬度被忽略的真正原因,爲了解決這個問題,有人這麼做:

tr.first{
     height:1px;
     font-size:1px;
     line-height:1px;
   }
   然後把第一行加上class="first"。
但是我試了還是不行,因爲我的行是動態生成的,最後這樣做解決的問題:

<tr class='first' style='display:none;'>

<td  style='width:140px;'></td>

<td  style='width:140px;'></td>"

"<td style='width:440px;'> </td></tr>

這樣就相當於以後樣式都使用第一樣的樣式

當然,也可以直接去掉table-layout:fixed;不過表格很多寬度就變得不可控了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章