HTML における表のセル幅の計算ルールの詳細な紹介

黄舟

リリース： 2017-05-25 10:51:40

オリジナル

2533 人が閲覧しました

tablewidth

の描画ルールについてテーブルのセル幅の計算方法は大きく分けて、固定テーブルレイアウト、自動テーブルレイアウト、CSSをよく書く人なら知っているはず, しかし、テーブルの幅を設定しても機能しないことがよくあります。それとも固定幅なしでレンダリングするのが普通なのでしょうか。これら 2 つのメソッドがレンダリングをどのように計算するかを紹介します。

最初にいくつかの一般的な変数を設定します:

tableWidth=テーブル幅=100%
tableBorderWidth=テーブルの左右の境界線の幅
tdBorderWidth =すべての列を左and right 境界線の幅の合計 (マージされた境界線は 1px としてカウントされます)
tdPadding = すべての列の左右のパディングの合計
tdWidth = 幅が定義されているすべての列の幅の合計
t dLength = 列数

1. 固定テーブルレイアウト、テーブルの追加 table-layout: 固定

ps: 固定テーブルレイアウトでは、テーブルの列の幅は列の内容とは何の関係もありません。テーブルの幅、列の幅、テーブルの左右の境界線、列の左右の境界線、列の左右のパディングは関連しています

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

幅が自動の列幅 (つまり、幅が定義されていない列の幅、計算結果が負の場合は 0) = (tableWidth-tableBorderWidth- tdBorderWidth-tdPadding-tdWidth)/tdLength

1、すべての幅は未定義

各列の幅テーブルの幅で均等に分散

row4row4row4row4row4row4row4row55row555row555row555row555row555row555row555row5555row5555row5555row55555row55555row555 Row7ROW7ROW7ROW7ROW7ROW7ROW7ROW7ROW8ROW8ROW8ROW8ROW8ROW8ROW8ROW9ROW99ROW99ROW9ROW9ROW99th1th2th3th4th5

th1	th2	th3	th4	th5	6番目	th7	th9	th10	row1row1row1row1row1row1row1row1low2row2row2row2row2row2row2row21row3
ROW10ROW10ROW10ROW10ROW10ROW10ROW10			2. すべての幅が定義されており、すべての列の幅の合計はテーブルの幅より小さくなります (tableBorderWidth+tdBorderWidth +tdPadding+tdWidth	各列の幅は、テーブル全体に均等に分散されます。合計幅; テーブルの幅は定義された幅です

th6

TH7

TH8TH9Row10row10Row10row10Row10Row1010

TH9

TH10

Row1Row1Row1Row1Row1Row1ROW1Row1

Row2Row 2Row2Row2Row2Row2Row2

Row3

Row4Row4Row4Row4Row4

R OW5Row5row5row5row5row5row5row5row5Row5Row6

Row7row7row7row7row7row7row7row7Row8row8row8row8row8row8Row8Row9Row9Row9Row9 row9row9row9

3. すべてに定義された幅があり、すべての列の幅の合計がテーブルの幅より大きくなります (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

各列の幅は独自に定義された幅です。 ; テーブルの幅はすべての列の幅です合計幅 (テーブルで定義された幅を超えます)

th1th9th10row1row1row1row1row1row1row1row2row2row2row2row2row2row2row2row3row 4row4row4row4row4row4row4row4row5row5row5row5row5row5row5row5row6row7row7row7row7row7row7row7row7row8row8row8row8row8row8row8row9ro w9row9row9row9row9row9row9 行10行10行10行10行10行10行104. 列の th 幅を指定するときの幅は、テーブルの幅よりも小さくなります (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth

th2	th3	th4	th5	th6	th7	th8

ps: 濃い灰色の背景を持つ列は、幅が定義されている列です。

幅が定義された列の幅は、独自に定義された幅であり、他にはありません幅が定義された列の幅は、テーブルの合計幅から定義された幅の合計を引いたもので、均等に配分されます

th1th2th3th4th5th6th7th8th9th10 row1row1row1row1row1row1row1row1row2row2row2row2row2row2row2row2row3 row4row4row4row4row4row4row4row4row5row5row5row5row5row5row5row5row6row7row7row7row7row7row7row7row7row8row8row8row8row8row8row8row8row9row9row9row9row9row9row9row 9row10row10row10 row10row10row10row105.幅が設定され、番目の幅の列の幅が大きくなるように設定されます。テーブルの幅よりも (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

ps: 背景が濃い灰色の列は、幅が定義された列です

幅が定義された列実際の幅は、それ自体で定義された幅です。幅が定義されていない他の列は、テーブルの合計幅から定義された幅の合計を引いたもので、均等に分散された後の幅は 0 より小さい場合、

幅が定義されていない他の

列の幅は 0 になります

。

th1th2th3th4th5th6th7th8th9row1row1row1row1row1row1row1row1row2row2row2row2row2row2row2row2

th10

row3

row4row4row4row4row4row4row4row4

row5row5row5row5row5row5row5row5

row6

row7row7row7row7row7row7row7row7

row8row8row8row8row8row8row8row8

row9row9row9 row9row9row9row9row9

行10行10行10行10行10行10行10

2. 自動テーブルレイアウト、テーブル設定 table-layout:auto (属性のデフォルト値は auto)

各列の幅は、行区切りなしでセル内の最も広い内容によって設定される場合があります。最終的なレイアウトを決定する前に、テーブル内のすべての列にアクセスする必要があるため、非常に遅くなります

1. すべての最小幅は未定です

各列の幅は、内部のコンテンツによって完全に決定されます。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	行4行4行4行4行4行4行4行4	行5行5行5行5行5行5行5行5	行6	行7行7行7行7行7行7行7行7	行8行8行8行8行8行8行8行8	行9行9行9行9行9行9row9row9	row10row10row10row10row10row10row10

2. すべての列には最小幅が定義されており、内容に基づいて計算されたすべての列の合計は次の値より小さくなります。テーブルの幅

各列幅は最初にコンテンツに基づいて計算され、定義された最小幅より小さくすることはできません。超過幅は各列に均等に配分されます。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4	row5	row6	row7	row8	row9	row10

3 すべてに最小幅が定義されており、コンテンツに基づいて計算されたすべての列の合計は、テーブルの幅

各列幅は最初にコンテンツに基づいて計算され、次に定義された最小幅

th9th10row1ROW2ROW2ROW2ROW2ROW2ROW2ROW21ROW3ROW4ROW4ROW4ROW4ROW4ROW4ROW4ROW4ROW5ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6ROW6LOW6ROW6LOW6LOW6W 6ROW6ROW6ROW9ROW10ROW10ROW10ROW10ROW10ROW10ROW10

th1	th2	th3	th4	th5	より小さくすることはできませんth6	th7	th8
							4. パート th は、コンテンツに基づいて計算された最小幅を定義します。すべての列の合計はテーブルの幅より小さくなります	ps: 濃い灰色の背景を持つ列は、定義された最小幅を持つ列です	それぞれの幅列は最初にコンテンツに基づいて計算され、次に定義された最小幅より小さくすることはできません。最後にテーブルによってレンダリングされる幅はテーブル自体で定義される幅より小さくすることはできません。

th1

th2

th3

th4th5th6th7th8th9th10row1row2row34行4行4行4行4行4行4行4行5行6行7行6行9行10

5. パート th は、コンテンツに基づいて計算されたすべての列の合計がテーブルの幅よりも小さいです

各列の幅は次のとおりです。最初にコンテンツに基づいて計算され、次に定義された最小幅

th1th2th3th4th5th6th7th 89番目th10row1row2row2row2row2row2row2row2row3row4row4row4row4row4row4row4row4row5row6row6row6row6row6row6 row6row7row6row6row6row6row6row6row6row6row9row10row10row10row10row10row10row10