ホームページ > 記事 > ウェブフロントエンド > CSS table-layout 属性の使用法

CSS table-layout 属性の使用法

不言オリジナル: 2018-06-25 16:42:142484ブラウズ

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

前書き:

今日は、その使用法について詳しく説明します。テーブルレイアウト属性。

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

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

1 定義と使用法

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

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

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

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

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

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

② 水平方向のレイアウトは、コンテンツに関係なく、テーブルの幅、列の幅、テーブルの境界線の幅、セルの間隔のみに依存します。セルの

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

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

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

②最終的なレイアウトを決定する前にテーブルにアクセスする必要があるため、すべてにおいてこのアルゴリズムが適用されます。時には長い時間がかかることもあります。

4table-layout 属性値

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

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

③inherit: からであることを指定します。親要素 table-layout 属性の値を継承します。

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

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

5 一つにまとめて書いてください)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>table-layout属性测试</title>
        <style type="text/css">
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table class="tb1" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
        <br />
        <table class="tb2" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
    </body>
</html>

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

ここで説明したいのは、ブラウザの幅が十分である可能性があり、セルがある場合かもしれません。コンテンツが不十分な場合、この 2 つの属性の効果を確認できない場合があります。現時点では、ブラウザの幅を減らすか、セルのコンテンツを増やす必要があります。そうすれば、2 つの属性の異なる効果が表示されます。価値観~~~

以上です。この記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

CSS table-layout 属性の使用法

関連記事