幅指定したテーブルの列幅をコンテンツ幅に固定する方法

テーブルの列幅をコンテンツ幅に限定する方法を紹介します。
小ネタですが最近知ってなるほどと思ったので書いておきます。

デフォルトのテーブルだと列幅がコンテンツ幅で決まります。
しかしテーブルに幅指定をした場合はそういうわけにはいきません。

例えば…

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" href="/app.css">
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Stars</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>angular/angular</td>
        <td>34,245</td>
      </tr>
      <tr>
        <td>2</td>
        <td>facebook/react</td>
        <td>91,242</td>
      </tr>
      <tr>
        <td>3</td>
        <td>vuejs/vue</td>
        <td>87,642</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
app.css
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #dedede;
  padding: .5em .75em;
}

上記のコードはこのような見た目になります。

スクリーンショット 2018-03-22 1.14.54.png

テーブルの横幅が100%なので、コンテンツの幅+余白を各列で分け合っています。

番号の列と(Github)スター数の列には余白は要らないとしましょう。

上記のCSSに下記の内容を追記します。

app.css
td:first-child,
td:last-child {
  width: 1px;
  white-space: nowrap;
}

すると、このような見た目になります。

スクリーンショット 2018-03-22 1.18.16.png

ポイントは列幅を 1px にするところです。テーブルの列は幅の指定がいくつであろうと少なくともコンテンツ幅までは広がってくれるようで、この性質を利用したテクニックなのですね。

また、white-space: nowrap; は、余白で改行が入らないための指定です。

以上、テーブルの列幅をコンテンツ幅に限定する方法を紹介しました。

詳しいテーブル列幅の算出方法については下記を参照してください。
:point_right: :book: CSS完全ガイド 第2版

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.