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

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

More than 1 year has passed since last update.

背景

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

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