テーブルの列幅を綺麗にしたい

列幅を何も考えずにテーブル(table)を作ると、なんともかっこ悪い感じになる。

セルの余計な空白は無い方が良い。

対応

セル幅を最小とするCSSを追加
テーブル全体に class="flexible-table" を指定、セル幅を最小とするtdに class="col-fit" を指定

/* 汎用テーブル */
.flexible-table {
  width: 100%;
  border-collapse: collapse;
}

/* 最小のセル幅（文字サイズぴったりに収める） */
.flexible-table .col-fit {
  white-space: nowrap;
  width: 1%;
}

スタイル適用後：
対象セルすべてにクラスを指定するのが面倒だが、見た目は良くなった。