CSSのtable-layout属性の使用例を詳しく解説

この記事では、主に table-layout 属性の使用法について説明します。 tableLayout 属性は、テーブルのセル、行、列のアルゴリズム ルールを表示するために使用されます。この記事では、CSS の table-layout 属性の使用法をサンプルコードを通じて紹介します。必要な方は参考にしていただければ幸いです。

はじめに:

今日は、table-layout属性の使い方を詳しく説明します。

 /*eg:设置表格布局算法*/
 table{
     table-layout:fixed;
 }

***この記事のキーワード: table-layout 属性値、定義と使用法、固定テーブル レイアウト、自動テーブル レイアウト。

1定義と使用法

tableLayout 属性は、テーブルのセル、行、列のアルゴリズム ルールを表示するために使用されます。

①この属性は、テーブルレイアウトを完成させるために使用されるレイアウトアルゴリズムを指定します。

②固定レイアウトアルゴリズムは高速ですが、あまり柔軟性がありません。

③自動レイアウトアルゴリズムは遅いですが、従来の HTML テーブルをより反映しています。

2 固定テーブルレイアウト

① ブラウザは自動テーブルレイアウトと比較してより速くテーブルをレイアウトできます。

② 水平レイアウトはテーブルの幅、列の幅、テーブルの境界線の幅、セルの間隔にのみ依存します。セルの内容を処理します。

③固定テーブルレイアウトを使用することで、ユーザーエージェントは最初の行を受け取った後にテーブルを表示できます。

3 テーブルのレイアウトを自動的に決定します

①列の幅は、行のない列セルの最も幅の広いコンテンツによって設定されます

②最終的なレイアウトの内容を決定する前に、テーブル内のすべての要素にアクセスする必要があるため、これはアルゴリズムには時間がかかる場合があります。

4table-layout 属性値

①automatic: (デフォルト値) 列の幅はセルの内容によって設定されます。

②fixed: 列の幅はテーブルの幅と列の幅によって設定されます

③inherit: テーブルがテーブルから継承されることを規定します。親要素 - レイアウト属性の値。

注: すべてのブラウザは table-layout 属性をサポートしています。

どのバージョンの Internet Explorer (IE8 を含む) も属性値「inherit」をサポートしていません。 ！ ！

5 理論は実践ほど良くなく、コードは機能します

いくら話しても、コードを見たほうが早く理解できますよ〜 一緒にこの栗を見てみましょう ↓↓↓

(皆さんがコードを読みやすいように、CSS と HTML コードを一緒に書きます)

nbsp;html>

    
        <meta>
        <title>table-layout属性测试</title>
        <style>
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    
    
        

                                                                                     

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbb

ccc

        
                                                                                              

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbb

ccc

    

実行後、次の画像が表示されます:

ここで、おそらくあなたのブラウザの幅が十分であることを説明したいと思います。セルに十分なコンテンツがない可能性があります。この 2 つの効果は表示されない可能性があります。現時点では、ブラウザの幅を減らすか、セルのコンテンツを増やす必要があります。そうすれば、さまざまな効果が表示されます。 2 つの属性値の ~~~

関連する推奨事項:

CSS の使用法 table-layout: 固定後のセル幅が制御されない問題を解決する

CSS: table-layout テーブル レイアウトの詳細な説明

CSS : テーブルレイアウト属性の役割と使い方を詳しく解説

以上がCSSのtable-layout属性の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。