HTMLのテーブルで横線のみを表示する方法

HTML CSS

HTMLのテーブルで横線のみを表示する方法

HTMLのテーブルで横線のみを表示する方法について説明します。
通常、テーブルでは行や列の境界線を表示するためにborderプロパティを使用しますが、特定の線のみ表示したい場合は、CSSを用いてその制御が可能です。
ここでは、縦線を非表示にし、横線のみを表示する方法を紹介します。

基本的な考え方

テーブルで横線のみを表示するには、まずすべての境界線を削除し、その後、必要な位置に横線のみを追加します。
テーブルの境界線を制御するために、CSSで以下のプロパティを活用します。

1. border-collapse: collapse;: テーブルの境界線を重ねて、各セル間の境界線を一つにまとめます。
2. border: none;: すべてのセルの境界線を削除します。
3. border-bottom または border-top: 横線を特定の位置に追加します。

HTMLファイルの作成

まず、HTMLファイルを作成し、テーブルにクラスやIDを設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>テーブルの横線のみを表示</title>
</head>
<body>

  <table id="test-table">
    <thead>
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        <td>データ3</td>
      </tr>
      <tr>
        <td>データ4</td>
        <td>データ5</td>
        <td>データ6</td>
      </tr>
      <tr>
        <td>データ7</td>
        <td>データ8</td>
        <td>データ9</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

このHTMLファイルでは、test-tableというIDをテーブルに付けています。
このテーブルに対して、特定のCSSスタイルを適用していきます。

CSSファイルの作成

次に、CSSファイルを作成し、テーブルの横線のみを表示するためのスタイルを記述します。

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

#test-table th,
#test-table td {
  border: none; /* すべての境界線を削除 */
  padding: 8px; /* セル内の余白を指定 */
}

#test-table th {
  border-bottom: 2px solid #000; /* ヘッダーの下に横線を追加 */
}

#test-table td {
  border-bottom: 1px solid #ccc; /* データ行の下に横線を追加 */
}

#test-table tbody tr:last-child td {
  border-bottom: none; /* 最終行の下には線を表示しない */
}

CSSの解説

  • #test-table: このセレクタは、test-tableというIDを持つテーブルに対してスタイルを適用します。

border-collapse: collapse;を使用することで、隣接するセル間の境界線を一つにまとめます。

  • #test-table th, #test-table td: これらのセレクタは、テーブルヘッダー（th）とデータセル（td）のすべてに適用されます。

ここでまず、border: none;を指定してすべての境界線を非表示にします。

  • #test-table th: テーブルヘッダーに対してのみ、下側の境界線を太めの実線で追加します。

border-bottom: 2px solid #000;とすることで、2ピクセルの黒い横線がヘッダーの下に表示されます。

  • #test-table td: データセルに対しても、下側の境界線を追加しますが、こちらは1px solid #ccc;とし、1ピクセルの薄い灰色の線を使用します。
  • #test-table tbody tr:last-child td: 最後の行の下側には境界線を表示しないため、このセレクタでborder-bottom: none;を適用します。

効果の確認

これで、テーブルには横線のみが表示され、縦線は表示されないようになります。
具体的には、ヘッダーとデータ行の各行の下に線が引かれますが、最終行の下には線が引かれません。
この設定により、表全体に横線のみを強調して表示できます。

応用例

この技法を応用して、特定の行や列にだけ横線を表示したり、線の色や太さを変更したりすることができます。
例えば、特定の行のみを強調表示したい場合には、その行にクラスを追加し、スタイルを上書きすることができます。

.test-highlight-row td {
  border-bottom: 2px solid #f00; /* 赤い横線を特定の行に適用 */
}

このようにして、CSSを利用すれば、自由にテーブルのデザインをカスタマイズすることが可能です。

以上が、HTMLのテーブルで横線のみを表示する方法の解説です。