1

私が欲しいテーブルヘッダー：

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

問題は、幅をどのように設定しても、2行目は同じままです。パーセンテージと固定ピクセル幅を試しました。

スタイルからテーブルレイアウトを削除することは機能しているようですが、固定レイアウトが必要です。「テーブルレイアウト：固定」を維持しながらそれを行う方法はありますか？

最終的には次のようなレイアウトにしたいのですが、テーブルレイアウトを使用します：fixed /

4

1 に答える 1

6

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/

于 2012-12-12T14:38:46.757 に答える