web-dev-qa-db-ja.com

HTMLテーブル-固定および複数の可変列幅

5列のテーブルを作成する必要があります。テーブルの幅は可変です（コンテンツの幅の50％）。一部の列には固定サイズのボタンが含まれているため、これらの列には100pxなどの固定値を設定する必要があります。一部の列にはテキストが含まれているため、これらの列に可変の列幅を設定します。

例えば：

Column1：20％of（tablewidth-sum（fixedwidth_columns）） '

列2：100ピクセル

Column3：40％（tablewidth-sum（fixedwidth_columns））

列4：200ピクセル

Column5：40％（tablewidth-sum（fixedwidth_columns））

これを達成する最良の方法は何ですか？

htmlcsshtml-tablemultiple-columns
17
Basaa

table要素に table-layout: fixed を設定してから、関連する<td>または<th>要素にwidth属性を設定するだけです。 ：

table {
    table-layout: fixed;
}

JSFiddle Demo.

[〜＃〜] mdn [〜＃〜] から：

table-layout CSSプロパティは、テーブルのセル、行、および列のレイアウトに使用されるアルゴリズムを定義します。

値：

修正済み：
テーブルと列の幅は、tableおよびcol要素の幅、またはセルの最初の行の幅によって設定されます。後続の行のセルは、列の幅に影響しません。

33
Hashem Qolami

テーブルの幅を固定するには、table-layoutプロパティをfixed;に設定する必要があります。％とpxを混在させるため、一貫性がありません。

Px幅のみを設定し、最終的には％の小さな値を設定し、他の列で使用可能な幅を使用できるようにします。例： http://jsfiddle.net/M4Et8/2/

<table style='table-layout:fixed;width:100%' border='1'>
    <tr>
        <th style='width: 20%;'>Column1</th>
        <th style='width: 100px;'>Column2</th>
        <th >Column3</th>
        <th style='width: 200px;'>Column4</th>
        <th >Column5</th>
    </tr>
</table>
6
G-Cyr