【初心者向け】CSSでテーブルの上下だけに線を引く方法｜線が太くなる問題も解決

「表の上下だけに線を引きたいのに、CSSがうまく効かない…」
「tr にボーダーを指定しても思った通りに表示されない…」
「上下の線が重なって太く見えてしまう…」

ブログを書き始めたばかりの方や、会社のWebページを更新する担当者、あるいはCSSを勉強中の学生さんでも、テーブルのボーダー設定でつまずいた経験はあるのではないでしょうか。

この記事では、CSSでテーブルの上下だけにボーダーを設定する方法を、初心者向けにわかりやすく解説します。
そのままコピペできるサンプルコードと、なぜその書き方になるのかを噛み砕いて説明しますので、安心して読み進めてください！

---

サンプル表示（完成イメージ）

以下のように、テーブルの一番上と一番下だけにスッキリとした線を引くことができます。

See the Pen テーブルの上下のみボーダーを設定 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 {
  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:last-of-type th,
table.sample-table tr:last-of-type td {
  border-bottom: 1px solid;
}

/* 行にカーソルを乗せたときの背景 */
table.sample-table tr:hover {
  background-color: #F2F2F2;
}

---

ポイント解説（初心者向けに噛み砕く）

なぜ tr にボーダーを指定しても思った通りにならないのか？

テーブルの行（tr）自体にボーダーを指定することは可能ですが、セル（th や td）のボーダーが優先されるため、意図した見た目にはなりません。
上下の線をきれいにコントロールするには、セル側にボーダーを設定する必要があります。

---

線が太くなってしまう原因

上下のセル同士にボーダーを設定すると、境目で線が2本重なり、太く見えてしまいます。
このとき役立つのが border-collapse: collapse;。
これを指定すると、セル同士の境界が重なっても1本の線として表示されます。

---

最終行の下にだけ線を引く方法

最後の行にだけ下線を追加するには、CSSの疑似クラス :last-of-type を使います。
これにより、テーブル全体の「最終行」を特定し、その行のセルにだけ border-bottom を適用できます。

---

ちょっとした応用

① 行ホバーで背景色を変える

マウスを行に乗せたときだけ、背景色を変えて見やすくする方法です。

/* 行にカーソルを乗せたときの背景色変更 */
table.sample-table tr:hover {
  background-color: #F2F2F2;
}

---

② 線の太さや色を変える

上下の線をもっと強調したい場合は、色や太さを調整できます。

/* 全セルの上線を太く濃くする */
table.sample-table th,
table.sample-table td {
  border-top: 2px solid #333;
  padding: 15px;
}

/* 最終行の下線も同じスタイルに */
table.sample-table tr:last-of-type th,
table.sample-table tr:last-of-type td {
  border-bottom: 2px solid #333;
}

たとえば「2px solid #333;」にすると、上下の線が濃いめの黒で強調され、よりはっきり見えるようになります。

---

FAQ（よくある質問）

---

まとめ

• 上下の線だけを表示したい場合は、セルに border-top を設定し、最後の行だけ border-bottom を追加すると綺麗に表示されます。
• 線が重なる問題は border-collapse: collapse; で解消できます。
• 初心者でもコピペで使えるサンプルを押さえておけば、表デザインのトラブルは簡単に解決できます。

テーブルの線は一見単純ですが、ちょっとした指定の違いで見た目が大きく変わります。
今回の方法を押さえておけば、ブログや会社ページで使用するテーブルのレイアウトを見やすく整える第一歩になるでしょう。