同じ列に、複数のwidth指定がなされているとき、列幅はどうなるか？

背景

tableの列幅を指定するには、col/colgropuで指定する方法と、td/th要素で指定する方法の2つがあります。
そのため、列幅の指定が重複する場合があります。
列幅の指定が重複したときの動きでハマッたことがあるので、まとめました。

前提条件

用語

• セル要素: td要素, th要素
• 列要素: col要素, colgroup要素

ブラウザ

• Firefox 60.0.2 (64 ビット)

CSS

sample.css

    table {
      table-layout: fixed; /* 列幅を固定レイアウトにする */
    }

    table,td,th {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th {
      background-color: gray;
    }

    td,th {
      /* td/th要素でwidthを指定したときと、col要素で指定したときの幅が同じになるようにする */
      box-sizing: border-box; 
    }

基準とするHTMLのtable

  <table>
    <colgroup>
      <col><col>
    </colgroup>

    <thead>
      <tr>
        <th>A</th><th>B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1A</td><td>1B</td>
      </tr>
      <tr>
        <td>2A</td><td>2B</td>
      </tr>
    </tbody>
  </table>

確認方法

各列に対して、widthの指定を複数設定します。
そのとき、実際に表示される列の幅を、ブラウザの開発ツールで確認します。

結果

See the Pen widthの指定を複数設定したときの、列幅を確認する by yuji38kwmt (@yuji38kwmt) on CodePen.

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

  <table>
    <colgroup>
      <col><col>
    </colgroup>

    <thead>
      <tr><th style="width:50px;">A</th><th style="width:150px;">B</th></tr>
    </thead>
    <tbody>
      <tr><td style="width:100px;">1A</td><td style="width:100px;">1B</td></tr>
      <tr><td style="width:150px;">2A</td><td style="width:50px;">2B</td></tr>
    </tbody>
  </table>

• 最も大きいwidthが採用される
• td,thによる優先度の違いはない
• 行番号による優先度の違いはない（後勝ち,先勝ちではない）

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

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

    <thead>
      <tr><th >A</th><th>B</th></tr>
    </thead>
    <tbody>
      <tr><td >1A</td><td>1B</td></tr>
      <tr><td >2A</td><td>2B</td></tr>
    </tbody>
  </table>

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

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

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

    <thead>
      <tr><th style="width:150px;">A</th><th style="width:50px;" >B</th></tr>
    </thead>
    <tbody>
      <tr><td >1A</td><td>1B</td></tr>
      <tr><td >2A</td><td>2B</td></tr>
    </tbody>
  </table>

• 最も大きいwidthが採用される
• col要素、セル要素による優先度の違いはない

まとめ

• 同じ列に、複数のwidth指定がなされているとき、最も大きいwidthが採用される
• ただし、col要素とcolgroup要素の両方にwidthが指定されている場合は、widthの大きさにかかわらず、col要素のwidthが採用される

【補足】tableのwidthを決めるアルゴリズム

以下のページに書いてありますが、理解できませんでした。。。

W3C CSS3 3.8.3. Computing Column Measures
https://drafts.csswg.org/css3-tables-algorithms/Overview.src.htm