2012-12-12 49 views
0

表頭我想:如何使用table-layout設置兩行表頭的寬度:fixed?

<table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%; table-layout:fixed;"> 
<tr> 
    <th rowspan="2" style="width: 35%;">A</th> 
    <th colspan="2" style="width: 25%;">B</th> 
    <th colspan="3" style="width: 40%;">C</th> 
</tr> 
<tr> 
    <th style="width: 8%;">B1</th> 
    <th style="width: 17%;">B2</th> 
    <th style="width: 8%;">C1</th> 
    <th style="width: 17%;">C2</th> 
    <th style="width: 15%;">C3</th> 
</tr> 

的問題是無論我怎樣設置寬度,第二行保持不變。我嘗試了百分比和固定的像素寬度。

從樣式中刪除表格佈局似乎工作,但我需要固定的佈局。有沒有辦法做到這一點,而保持「表格:固定」?

我想要的到底是佈局看起來像this但與表格的佈局:固定/

+0

什麼是你的目標? –

+0

我希望第二行標題具有指定的寬度。有點像[這](http://jsfiddle.net/rRJU7/),但與表格佈局:固定 – Bogdan

回答

3

table-layout:fixed

表和列的寬度由表和山坳的寬度設定 元素或第一行單元格的寬度。 中的單元格不會影響列寬。

所以,你可以修改你的代碼是這樣的:

<table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%;border:1px solid grey;table-layout:fixed;"> 
    <col style="width: 35%;"/> 
    <col style="width: 8%;"/> 
    <col style="width: 17%;"/> 
    <col style="width: 8%; "/> 
    <col style="width: 17%;"/> 
    <col style="width: 15%;"/> 
<tr> 
    <th rowspan="2" style="width: 35%; border:1px solid grey;">A</th> 
    <th colspan="2" style="width: 25%; border:1px solid grey;">B</th> 
    <th colspan="3" style="width: 40%; border:1px solid grey;">C</th> 
</tr> 
<tr> 
    <th style="width: 8%; border:1px solid grey;">B1</th> 
    <th style="width: 17%; border:1px solid grey;">B2</th> 
    <th style="width: 8%; border:1px solid grey;">C1</th> 
    <th style="width: 17%; border:1px solid grey;">C3</th> 
    <th style="width: 15%; border:1px solid grey;">C4</th> 
    </tr> 
</table> 

觀看演示:http://jsfiddle.net/rRJU7/2/

+0

謝謝,修復它。 – Bogdan