【CSS】テーブルの上下にボーダーを設定する方法

概要

サンプルのように、テーブルの上下だけにボーダーを設定する方法です。

意外と、ボーダーが重なり、太くなってしまったりして綺麗に作れなかった人は是非確認してみてください。

サンプル

See the Pen Untitled by take it easy (@take-it-easy) on CodePen.

コーディング方法

HTML

<table class="sample-table">
  <tbody>
    <tr>
      <th>会社名</th>
      <td>株式会社○○○○</td>
    </tr>
    <tr>
      <th>住所</th>
      <td>〒160-0013<br>東京都新宿区霞ヶ丘町○○○○</td>
    </tr>
    <tr>
      <th>電話番号</th>
      <td>03-○○○○-○○○○</td>
    </tr>
    <tr>
      <th>代表者</th>
      <td>代表取締役　○○　○○○</td>
    </tr>
  </tbody>
</table>

CSS

/* テーブル */
table.sample-table {
  /* 中央揃え + 上下20pxのマージン */
  margin: 20px auto;
  /* テーブルの幅 */
  width: 500px;
  /* 境界なし */
  border-collapse: collapse;
}

/* テーブルの見出し */
table.sample-table th {
  /* 中央揃え */
  text-align: center;
  /* 太字 */
  font-weight: bold;
}

/* テーブルの見出しとセル */
table.sample-table th,
table.sample-table td {
  /* ボーダー（上） */
  border-top: 1px solid;
  /* パディング（上下左右） */
  padding: 15px;
}

/* テーブルの最後の見出しとセル */
table.sample-table tr th:last-of-type,
table.sample-table tr td:last-of-type {
  /* ボーダー（下） */
  border-bottom: 1px solid;
}

/* ホバー状態 */
table.sample-table tr:hover {
  /* 背景色を薄いグレー */
  background-color: #F2F2F2;
}