背景

W3CのCSS3の仕様によると、tableの列幅の計算アルゴリズムは複雑です。条件分岐がたくさんあります。
https://www.w3.org/TR/css-tables-3/#content-measure

列幅の指定で、期待通りにならないことがよくあるので、まとめました。

前提条件

用語

セル要素: 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 style="width:200px;">
    <colgroup>
      <col><col>
    </colgroup>
    <tbody>
      <tr>
        <td>1A</td><td>1B</td>
      </tr>
    </tbody>
  </table>

確認方法

table要素のwidthを200pxにした状態で、さらにcol要素のwidthを指定します。
実際に表示される列の幅を、ブラウザの開発ツールで確認します。

結果

See the Pen table要素で指定したwidthが、col要素で指定したwidthと矛盾する場合、列幅はどうなるか？ by yuji38kwmt (@yuji38kwmt) on CodePen.

`table_width ＞ col1_width + co2_width`の場合

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

tableのwidthは、table要素に指定したwidthと同じ
各列のwidthは、各列に指定したwidthの比率を保った状態で、拡大される
- co1_widthは132.883px, co2_widthは66.45px

`table_width ＜ col1_width + co2_width`の場合

  <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>

各列のwidthは、col要素に指定したwidthと同じ
table要素のwidthは、各列に指定したwidthの合計値
- table要素のwidthは250px

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

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

1列目のwidthは、col要素に指定したwidthと同じ
tableのwidthは、table要素に指定したwidthと同じ
2列目は、罫線外に表示される
- 2列目のcol要素のwidthは0px
- 2列目のtd要素のwidthは-2.66px. 負の値!!

まとめ

table_width ＞ col1_width + co2_widthの場合
- 列幅は、各列に指定したwidthの比率を保った状態で、拡大される
table_width ＜ col1_width + co2_widthの場合
- 列幅は、各列に指定したwidthと同じ
table_width ≧ col1_width AND co2_widthは未指定の場合
- 2列目の幅は0pxで、罫線の外に表示される。

【補足】col要素でなくtd要素にwidthを指定

結果はcol要素のときと同じでした。
CodePen参照

感想

table_width ＜ col1_width + co2_widthの挙動が意外でした。
「table要素のwidthが優先」という訳ではないようです。

前回まとめた記事でもそうでしたが、widthは「最大値」が優先になるときが多そうですね。
https://qiita.com/yuji38kwmt/items/25763a557d76017ecf2f

まあ、CSS3の仕様を理解すれば、すべて解決なのですが。。。

table要素で指定したwidthが、col要素で指定したwidthと矛盾する場合、列幅はどうなるか？

背景