コピペで使えるCSSテーブルデザイン集

HTMLで組んだばかりの表は、線もすき間もなくて頼りない見た目。でもCSSを3行かけるだけで、ちゃんとした「料金表」の顔になります。表の定番デザインを、動くデモつきで7個まとめました。

まずはこの3行から

線の整理・余白・下線——素の表が一番見違える3点セットです。

table {
  border-collapse: collapse;   /* 線の二重化を防ぐおまじない */
}
th, td {
  padding: 10px 24px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

border-collapse: collapseは「となり合うマスの線を1本にまとめる」指定で、表のCSSではほぼ毎回書くおまじないです。縦線は引かず横線だけにするのが、今どきのすっきり見せる定番です。

見出し行に色帯

<th>の行に色をしくと、どこが見出しか一目で伝わります。

th {
  background: #ff8a3d;
  color: #fff;
}

しましま模様

行数が多い表は、1行おきに薄く色をしくと目が迷いません。行を数えて色を付けるのはCSSにまかせられます。

tr:nth-child(even) {
  background: #fff7e6;
}

:nth-child(even)は「偶数番目の行」という意味のセレクタ。evenをoddにすると奇数行に変わります。

ホバーで行が光る

マウスを乗せた行だけ色が変わると、「いまどの行を見ているか」を見失いません。

tr:hover td {
  background: #fff3d6;
}

角丸カード風

表全体をカードのように角丸にすると、モダンな印象になります。コツは外側をoverflow: hiddenの箱で包むこと。

.table-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

表そのものにborder-radiusをかけても、マスの背景色が四隅からはみ出してしまいます。丸めるのは外側の箱の仕事にして、はみ出しをoverflow: hiddenで切り落とします。

数字は右ぞろえ

値段や点数の列は右ぞろえにすると、桁がそろって比べやすくなります。地味ですが、プロの表は必ずやっている小ワザです。

td.num {
  text-align: right;
}

HTMLは<td class="num">800円</td>のように、数字の列のマスにクラスを付けるだけです。

スマホでは横スクロールに

列が多い表は、スマホの幅にはどうしても収まりません。つぶして崩すのではなく、横にスクロールさせて逃がすのが定番の対処です。

.scroll-box {
  overflow-x: auto;   /* はみ出したら横スクロール */
}
table {
  white-space: nowrap;   /* マスの中で変に折り返さない */
}

表を<div class="scroll-box">で包むだけ。ページ全体は崩さず、表だけがスクロールします。

まとめ

1. 最初の3行はborder-collapse＋padding＋下線——これだけで表の顔になる
2. 行が多いならしましま（nth-child(even)）とホバー、見出しには色帯
3. スマホ対応は包んだ箱にoverflow-x: auto——つぶさず横に逃がす

時間割・料金表・ランキング——表が出てくるページは意外と多いもの。この7個で、どんな表もひとまず戦えます。