Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

背景

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. 負の値!!

image.png

まとめ

  • 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の仕様を理解すれば、すべて解決なのですが。。。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away