CSSでテーブルの列幅をコンテンツ幅に固定する

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

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

例えばこのようなテーブルがあるとします。

table {
  border-collapse: collapse;
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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