【CSS】tableの幅を固定する

【CSS】tableの幅を固定する

HTMLでテーブルを作成しているとき、表示するデータによってテーブルの幅が変わってしまうことがあります。

ヘッダ列のtdに対してCSSでwidthを指定しても、列幅より長い文字列に引っ張られてしまうんですね。

これは、テーブルの幅を固定するCSSを記述することで解決することができます。

https://msdn.microsoft.com/ja-jp/library/ee341478(v=expression.40).aspx

  <div id="TableWrapper" style="width: 300px;">
    <div>列幅を固定していないテーブル</div>
    <table style="width: 100%; table-layout: auto;" >
      <thead>
        <tr>
          <th style="width:20%;">A</th>
          <th style="width:20%;">B</th>
          <th style="width:20%;">C</th>
          <th style="width:20%;">D</th>
          <th style="">E</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AAA</td>
          <td>BBBBBB</td>
          <td>CCCCCCCCC</td>
          <td>DDDDDDDDDDDD</td>
          <td>EEEEEEEEEEEEEEE</td>
        </tr>
      </tbody>
    </table>

    <div>列幅を固定したテーブル</div>
    <table style="width: 100%; table-layout: fixed;" >
      <thead>
        <tr>
          <th style="width:20%;">A</th>
          <th style="width:20%;">B</th>
          <th style="width:20%;">C</th>
          <th style="width:20%;">D</th>
          <th style="">E</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AAA</td>
          <td>BBBBBB</td>
          <td>CCCCCCCCC</td>
          <td>DDDDDDDDDDDD</td>
          <td>EEEEEEEEEEEEEEE</td>
        </tr>
      </tbody>
    </table>
  </div>

tableタグのstyleに、「table-layout:fixed」を指定していることが分かります。

実際にはこんな感じです。

どちらも同じ幅を指定しています。

列幅を固定していないテーブルはデータによって幅が変わってしまうのに対し、列幅を固定しているテーブルは指定された幅になっていることが分かります。

このままではセルに含まれる文字列が飛び出してしまうため、tdタグに対して「word-wrap: break-word;」を指定して改行ができるようにすると良いかもしれません。