CSSのtable-layout属性の使用例を詳しく解説-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-18 09:05:30

オリジナル

1603 人が閲覧しました

この記事では、主に 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 コードを一緒に書きます)

<!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 つの属性値の ~~~