47072


# 背景

HTMLのtable要素の列幅が、CSSで指定した`width`によって、どう変わるかを確認していました。

たとえば、以下のtable要素のwidthは、col要素に指定したwidthと矛盾しています（`200 != 200 + 50`）。  
このHTMLをブラウザで確認すると、table要素のwidthは250pxでした。

[code]

    <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>
    
[/code]

CSSは以下の通りです。

[code]

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

# 質問

なぜ、上記のような動きをになるかを、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でした。これはすべてのセルの中で、最大の幅が適用されています。

[code]

     <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>
    
[/code]

しかし、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>

これはどう解釈すればよいでしょうか？先頭行のセルが列幅を決めているようには見えませんでした。


CC BY-SA 4.0
2018-07-28T13:08:44.440
47053
2018-07-31T04:19:20.060
2018-07-31T04:19:20.060
19524
19524
question
html css
テーブルレイアウトのアルゴリズムの仕様は、どこで確認できますか？


[MDNのtable-layout](https://developer.mozilla.org/ja/docs/Web/CSS/table-
layout)では、[CSS Level 2 (Revision 1)のtable-layout
の定義](https://www.w3.org/TR/CSS2/tables.html#width-layout)を仕様としているようです。

ただ、[CSS Level 2 (Revision 1)のtable-layout
の定義](https://www.w3.org/TR/CSS2/tables.html#width-layout)内では、"Automatic table
layout"について`Note. This may be defined in more detail in
CSS3.`となっているため、概要のみ記載のようです。


CC BY-SA 4.0
2018-07-28T13:32:38.657
47055
2018-07-28T13:32:38.657
47053
answer


table要素の幅は、`table-
layout`の設定によって変わってきます。既定又は`auto`であれば、以下の図のように各列の幅が調整されて、table要素の幅は200pxとなります。

`table-
layout`を`fixed`にすると、このケースでは`<colgroup>`で設定した幅になるので、table要素の幅は250pxとなります。質問で「table要素のwidthが250pxとなった」のは、質問に表示されている以外の所で`fixed`に設定しているためと思われます。

現在の`table-layout`の仕様は [CSS Level 2 (Revision 1)のtable-
layout](https://www.w3.org/TR/CSS2/tables.html#width-layout)
だと思われます。質問にあるように、CSS3については草稿（Working Draft）段階です。

[![画像の説明をここに入力](https://i.stack.imgur.com/M9wxn.png)](https://i.stack.imgur.com/M9wxn.png)


CC BY-SA 4.0
2018-07-29T04:37:14.223
47072
2018-07-30T04:47:53.157
2018-07-30T04:47:53.157
15171
15171
47053
answer