戻る

テーブル幅を指定し、一部のセル幅を % 指定

テーブル幅を width="400" とし、それに対する割合。

width="30%" 1行2列目
2行1列目 2行2列目

一つのセルの 30% 指定

自分のセルがテーブルの 30% だとし、その 100% に相当するのがテーブル幅になる。したがって、テーブル幅は、1行1列目のセル幅 * 100 / 30 となる。

width="30%"

一つのセルの 100% 指定

自分のセルがテーブルの 100% なので、テーブル幅とセル幅は同じになる。

width="100%"

一部のセル幅に % 指定 その1

テーブル幅を指定してない場合、未指定の列に残りの % を分配し、自セルと % との割合から一番大きなテーブルサイズを決定する。1行1列目は 10% なので、これを基準にした場合のテーブルサイズは、1行1列目の 10 倍の大きさになる。1行2列目にはサイズの指定が無いが、残りの 90% が割り振られていると見なされ、1行2列目の 10/9 倍がテーブルサイズとなる。当然、1行1列目を基準にしたテーブルサイズのほうが大きいので、この値がテーブルサイズとなるが、画面サイズより大きくはならない。そして各列は % の比率に従い1:9になるが、実際は1列目の最小サイズがテーブルサイズの 10% より大きいため(画面サイズにもよるが)、10% よりかは大きくなる。

width="10%" 1行2列目
2行1列目 2行2列目

一部のセル幅に % 指定 その2

width が 30% のため、テーブルの最大サイズは1行1列目の 10/3 倍になり、その1より小さい。

width="30%" 1行2列目
2行1列目 2行2列目

一部のセル幅に % 指定 その3

テーブルサイズは一番小さくなる。

width="50%" 1行2列目
2行1列目 2行2列目

一部のセル幅に % 指定 その4

1行2列目の、暗黙の 30% の幅のために、テーブルサイズは1行2列目の 10/3 倍になる。

width="70%" 1行2列目
2行1列目 2行2列目

一部のセル幅に % 指定 その5

1行2列目の、暗黙の 90% の幅のために、テーブルサイズは1行2列目の 10 倍になる。

width="90%" 1行2列目
2行1列目 2行2列目

% 指定したセルとは違う行の中身が大きい

% 指定の場合は、固定幅指定とは違い、どの行に指定されていても効果は同じ。

width="30%" 1行2列目
2行1列目。このセルは % が指定されていないが、中身はそこそこ長い。 2行2列目

列がたくさんある

列がたくさんあっても、% による比率は指定通り。

width="35%" width="15%" width="25%" width="25%"
2行1列目 2行2列目 2行3列目 2行4列目

列がたくさんあり、一部の中身が大きい

一部のセルの中身が大きくても、% 指定にしたがう。

width="40%" width="40%" width="20%"。このセルの中身は少し大きい。
2行1列目 2行2列目 2行3列目

指定された幅より中身が大きい

幅 400 のテーブルで、本来は % の比率通りになるはずだが、1行1列目の最小幅が大きいので、1列目が広くなる。

width="20%" veryverylongword width="40%" width="40%"
2行1列目 2行2列目 2行3列目

セル間スペースが大きい

セル間スペースに関係なく、各列は指定サイズになる。

width="30%" 1行2列目
2行1列目 2行2列目

パディングが大きい

各列は指定サイズにパディング * 2(左右の分)を足した大きさになる。

width="30%" 1行2列目
2行1列目 2行2列目

戻る