【HTML/CSS】テーブルの真ん中だけ縦の枠線を引く方法

Webデザイン

2024.05.29

Webサイトを作っていると「経歴」の欄をどのように作るかは意外と悩みものです。

今回はシンプルで見栄えがいい、テーブルの真ん中に縦の枠線だけを引いたデザインのHTMLとCSSを解説していきます。

ぜひWebデザインなどに役立ててくださいね。

サンプル
HTMLとCSS
1. HTML
2. CSS
解説
テーブルが４列以上の場合
まとめ

サンプル

このデザインは2×2のテーブルの真ん中にだけ縦の枠線を引くことで実現しています。

HTMLとCSS

HTML

今回のHTMLは以下のようになります。（コピペ可です。）

 <table>
        <tr>
          <td>1990年9月</td>
          <td>東京都港区にて出生</td>
        </tr>
        <tr>
          <td>2008年3月</td>
          <td>A高校を卒業</td>
        </tr>
        <tr>
          <td>2013年3月</td>
          <td>B大学経済学部を卒業</td>
        </tr>
        <tr>
          <td>2014月4月〜</td>
          <td>株式会社Cにてシステムエンジニアとして勤務</td>
        </tr>
      </table>

CSS

CSSはこちらになります。こちらもコピペ可です。

table {
  border-collapse: collapse; /* テーブルの枠線をまとめる */
  width: 100%;
}

td {
  text-align: right;
  border: none; /* 初期状態で枠線を削除 */
  padding: 10px; /* セルの内側に余白を追加 */
}

td + td {
  text-align: left;
  border-left: 1px solid rgb(149, 148, 148); /* 各行の2列目のセルに左枠線を追加 */
}

解説

ポイントはCSSの以下の部分です。

td + td {
  text-align: left;
  border-left: 1px solid rgb(149, 148, 148); /* 各行の2列目のセルに左枠線を追加 */
}

「隣接セレクタ」を使うことでtd要素の後ろにあるtd要素（つまり２列目）にだけborderを適用しています。

テーブルが４列以上の場合

テーブルが4列以上の場合に「真ん中にだけ縦の枠線を引く」方法はちょっと異なります。

HTML

<div class="main">
        <table>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
            <tr>
                <td>Cell 5</td>
                <td>Cell 6</td>
                <td>Cell 7</td>
                <td>Cell 8</td>
            </tr>
        </table>
    </div>

CSS

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

td {
  text-align: center;
  border: none;
}

td:nth-child(2) {
  border-right: 2px solid black;
}