テーブル幅

テーブルの幅に関する質問ですが、実際に最もイライラするのはセル td の幅です。開発中にこの問題によく遭遇するため、テーブル幅アルゴリズムを学ぶための情報を探しました。

table-layout

table-layout はテーブル レイアウト アルゴリズムを定義します。値は自動または固定です。

fixed

は、テーブル レイアウトに固定テーブル レイアウト アルゴリズムを使用します。テーブルの幅は幅によって決まり、列の幅はセルの最初の行の幅によって決まります。
分析によると、ここでのテーブルの計算された幅は 200 ピクセル、最初の列の計算された幅は 100 ピクセル、2 番目の列の計算された幅は 20 ピクセル、3 番目と 4 番目の列の計算された幅は 33 ピクセルです。 3 列目と 4 列目の幅は、表の幅から 1 列目と 2 列目の幅とセルの左右の境界線の幅の合計を引いて、2 で割った値になります。おそらく、「1-3」が配置されている td が幅を定義しないのはなぜなのかと疑問に思うかもしれません。 3 番目の列が計算されるのはなぜですか?回答: 幅を定義する td が最初の行に配置されていないため、th は最初の行に配置されます。

ルール

1. 列要素(col)が設定されている場合、列要素の幅は列の幅に設定されます。

2. 列要素の幅が自動である場合、または列要素が設定されていない場合、セルの最初の行の幅が列の幅に設定されます。

3. 上記2つの条件が満たされない場合は、ブラウザによって計算され決定されます。

auto (デフォルト値)

自動テーブルレイアウトアルゴリズムを使用してテーブルをレイアウトします。テーブルとセルの幅は、テーブルとセルに含まれるコンテンツによって異なります (セルの幅は引き続き設定できます)。

ルール

1. 最小セル幅を計算する

   1.1 计算每个单元格的最小内容宽度：内容可以流入多行，但不能超出单元格。
   1.2 如果单元格的width值大于最小可能宽度，则最小单元格宽度为单元格的width值。
   1.3 如果单元格的width值为auto，则最小单元格宽度为为最小内容宽度。

2. 最大セル幅を計算する: コンテンツが折り返されずに完全に表示される場合に必要な幅(表示の折り返しに関係なく)

3. 最小列幅を計算する:列内のすべてのセルの最小セル幅の最大値

4. 最大列幅を計算します: 列内のすべてのセルの最大セル幅の最大値

5. セルが列にまたがる場合、最小列幅であり、このスパン列セルの最小セル幅と等しくなければなりません。最大列幅は、このセルの最大セル幅と等しくなければなりません。

テーブル幅に関するその他の記事については、PHP 中国語 Web サイトに注目してください。