テーブルレイアウトのアルゴリズムの仕様は、どこで確認できますか?
背景
HTMLのtable要素の列幅が、CSSで指定したwidth
によって、どう変わるかを確認していました。
たとえば、以下のtable要素のwidthは、col要素に指定したwidthと矛盾しています(200 != 200 + 50
)。
このHTMLをブラウザで確認すると、table要素のwidthは250pxでした。
<table style="width:200px;">
<colgroup>
<col style="width:200px;"><col style="width:50px;">
</colgroup>
<tbody>
<tr>
<td>1A</td>
<td>1B</td>
</tr>
</tbody>
</table>
CSSは以下の通りです。
table {
table-layout: fixed; /* 列幅を固定レイアウトにする */
}
td, th {
/* td/th要素でwidthを指定したときと、col要素で指定したときの幅が同じになるようにする */
box-sizing: border-box;
}
table,td,th {
border: 1px solid black;
border-collapse: collapse;
}
質問
なぜ、上記のような動きをになるかを、HTML,CSSの仕様で確認したいです。
どのページを確認すれば良いですか?
Google検索したところ、仕様らしいページが見つかりました。
https://www.w3.org/TR/css-tables-3/#computing-column-measures
https://drafts.csswg.org/css3-tables-algorithms/Overview.src.htm
しかし、
- 前者は、「Not Ready For Implementation」
- 後者は、「This document is obsolete.」
と書いてあり、どちらも今のブラウザの仕様を表しているようには、思えませんでした。
追記の質問
以下のtableは列幅が150pxでした。これはすべてのセルの中で、最大の幅が適用されています。
<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>
しかし、CSS2の仕様には、
Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column.
と書いてありました。
https://www.w3.org/TR/CSS2/tables.html#fixed-table-layout
これはどう解釈すればよいでしょうか?先頭行のセルが列幅を決めているようには見えませんでした。