HTML テーブルで固定セル幅を維持するにはどうすればよいですか?

固定テーブルセル幅の維持

テーブルは引き続き一般的なレイアウト方法であるため、セル幅の制御について疑問が生じます。幅属性を使用した従来のセルのスタイル設定は、セルのコンテンツの拡張によって指定された幅がオーバーライドされるため、失敗することがよくあります。

jqGrid が固定セル幅を実現する方法

jqGrid は、次の要素の組み合わせを利用します。

• タグ: このタグはテーブルの列の特性を定義します。 jqGrid は 内に width 属性を設定します。
• table-layout:fixed Style: テーブルに適用されるこのスタイルは、セルの内容に関係なく列の幅をロックします。
• overflow: hidden 表のセルのスタイル: このスタイルは、セルの内容が指定を超えてオーバーフローするのを防ぎますwidth.

固定セル幅の実装

独自のテーブルに固定セル幅を実装するには:

1. < を含めます。列>
2. CSS を使用してテーブル レイアウト: 固定スタイルをテーブルに適用します。
3. 個々のテーブル セルにオーバーフロー: 非表示スタイルを設定します。

例コード

HTML:

<table>
    <col width="20px">
    <col width="30px">
    <col width="40px">
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table><p>CSS:</p>
<pre class="brush:php;toolbar:false">table { table-layout: fixed; }
table td { overflow: hidden; }

以上がHTML テーブルで固定セル幅を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。