Edited at

れつはば いくつ? ~ CSSのTableレイアウト ~

More than 1 year has passed since last update.

image.png



概要


  • CSSの問題をいくつか出します

  • table要素の列幅のサイズをお答えください

第5回名古屋若手Webエンジニア交流会のLT資料



前提条件


  • 列幅は、Firefoxのインスペクタで確認できるcol要素の幅

    image.png


  • ブラウザはChrome 68, Firefox61


  • セルの中身は1~2文字(50px未満)


  • 罫線やパディングは考慮しない




style sheet


  • 列幅は固定レイアウト

  • td,th要素にwidthを指定したときと、col要素に指定したときで、結果は同じ

table {

table-layout: fixed; /* 列幅を固定レイアウトにする */
}
td, th {
/* td/th要素でwidthを指定したときと、col要素で指定したときの幅が同じになるようにする */
box-sizing: border-box;
}
table,td,th {
border: 1px solid black;
border-collapse: collapse;
}



widthの優先度



複数のセル要素にwidthを指定した場合

れつはばいくつ?

 <table>

<tr>
<td style="width:50px;">1A</td>
</tr>
<tr>
<td style="width:150px;">2A</td>
</tr>
<tr>
<td style="width:100px;">3A</td>
</tr>
</table>


  • (A) 50px: 先頭行のセル要素で指定したwidth

  • (B) 100px: 最終行のセル要素で指定したwidth

  • (C) 150px: 最大のセル幅



(答) 150px: 最大のセル幅

image.png



col, colgroup要素の両方にwidthを指定した場合

れつはばいくつ?

  <table>

<colgroup style="width:100px;">
<col style="width:50px;">
</colgroup>

<tr>
<td>1A</td>
</tr>
</table>


  • (A) 100px: colgroup要素で指定したwidth

  • (B) 50px: col要素で指定したwidth



(答) 50px: col要素で指定したwidth

image.png



col要素、セル要素の両方にwidthを指定した場合

れつはばいくつ?

  <table>

<colgroup >
<col style="width:50px;">
<col style="width:150px;" >
</colgroup>

<tr>
<td style="width:150px;">A</td>
<td style="width:50px;" >B</td>
</tr>
</table>


  • (A) 50px, 150px : col要素に指定したwidth

  • (B) 150px, 50px : セル要素に指定したwidth

  • (C) 150px, 150px : MAX(col要素に指定したwidth, セル要素に指定したwidth)



(答) 150px, 150px : MAX(col要素に指定したwidth, セル要素に指定したwidth)

image.png



table要素で指定したwidthが、col要素で指定したwidthと矛盾する場合



table_width > col1_width + co2_width の場合

れつはばいくつ?

  <table style="width:200px;">

<colgroup>
<col style="width:100px;">
<col style="width:50px;">
</colgroup>
<tr>
<td>1A</td>
<td>1B</td>
</tr>
</table>


  • (A) 100px, 50px : 各列に指定したwidth

  • (B) 約133px, 約67px : 各列に指定したwidthの比率を保った状態で、tableのwidthに合うように拡大された値( 100*200/150, 50*200/150



(答) 約133px, 約67px

image.png



table_width < col1_width + co2_width の場合

れつはばいくつ?

  <table style="width:200px;">

<colgroup>
<col style="width:150px;">
<col style="width:100px;">
</colgroup>
<tr>
<td>1A</td><td>1B</td>
</tr>
</table>


  • (A) 150px, 100px : 各列に指定したwidth

  • (B) 120px, 80px : 各列に指定したwidthの比率を保った状態で、tableのwidthに合うように縮小された値( 150*200/250, 100*200/250



(答) 150px, 100px : 各列に指定したwidth

image.png



table_width ≧ col1_width AND co2_widthは未指定 の場合

れつはばいくつ?

  <table style="width:200px;">

<colgroup>
<col style="width:200px;"><col >
</colgroup>
<tr>
<td>1A</td><td>1B</td>
</tr>
</table>


  • (A) 200px, 2文字分の幅 : 各列に指定したwidth

  • (B) 200px-2文字分の幅, 2文字分の幅 : tableのwidthに合うような幅



(答) (X) 200px, 0px


  • 2列目の中身がtable要素の枠からはみ出ている

image.png

image.png



まとめ


  • 基本的にwidthは最大値が採用される

  • colgroup要素よりcol要素のwidthが採用される

  • tableのwidthと各列のwidthが矛盾したときの動きは、理解し難い

widthが矛盾しないようにwidthを指定しましょう。



補足



Tableレイアウトのアルゴリズム

https://www.w3.org/TR/css-tables-3/#computing-column-measures

https://drafts.csswg.org/css3-tables-algorithms/Overview.src.htm

よく分からなかった。。。

誰か教えて



参考サイト

本記事は、以下の記事をスライド用にまとめたものです。

https://qiita.com/yuji38kwmt/items/8f9ca540f0f5ef7b8eea

https://qiita.com/yuji38kwmt/items/25763a557d76017ecf2f



CodePen

See the Pen れつはばいくつ? ~CSS Tableレイアウトアルゴリズム ~ by yuji38kwmt (@yuji38kwmt) on CodePen.