【初心者でも安心】CSSで表の列を操作！2列目を中心に分かりやすく解説

2024-06-30

CSSを使って表の2列目のみを変更する方法

方法1： nth-child() 疑似クラスを使う

nth-child() 疑似クラスは、要素の子要素をインデックス番号で選択するためのものです。このインデックス番号は、要素が最初に現れる順番に基づいており、1から始まります。

table tr td:nth-child(2) {
  /* 2列目のみに適用されるスタイル */
  text-align: center; /* 中央揃え */
  background-color: #f0f0f0; /* 薄灰色背景 */
}

この例では、table 要素内のすべての tr 要素の子要素のうち、td 要素でインデックス番号が2番目であるものに対してのみ、中央揃えと薄灰色背景を設定しています。

方法2：隣接兄弟セレクタを使う

隣接兄弟セレクタは、ある要素の直後に続く兄弟要素のみを選択するためのものです。

table tr td + td {
  /* 1列目の次の td 要素にのみ適用されるスタイル */
  text-align: right; /* 右揃え */
  border: 1px solid #ccc; /* 境界線 */
}

補足

これらの方法を理解することで、CSSを使って表の特定の列を簡単に変更することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSで表の2列目のみを変更する</title>
  <style>
    table {
      border-collapse: collapse; /* セルの境界線を結合 */
    }

    th, td {
      border: 1px solid #ccc; /* セルに境界線を追加 */
      padding: 5px; /* セルの余白を追加 */
    }

    /* 方法1： nth-child() 疑似クラスを使う */
    table tr td:nth-child(2) {
      text-align: center; /* 2列目を中央揃え */
      background-color: #f0f0f0; /* 薄灰色背景 */
    }

    /* 方法2： 隣接兄弟セレクタを使う */
    table tr td + td {
      text-align: right; /* 2列目を右揃え */
      border: 2px solid #ccc; /* 太めの境界線 */
    }
  </style>
</head>
<body>
  <h2>CSSで表の2列目のみを変更する</h2>

  <table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>田中 太郎</td>
      <td>30</td>
      <td>東京都渋谷区</td>
    </tr>
    <tr>
      <td>佐藤 花子</td>
      <td>25</td>
      <td>京都府京都市</td>
    </tr>
    <tr>
      <td>鈴木 太郎</td>
      <td>40</td>
      <td>大阪市北区</td>
    </tr>
  </table>
</body>
</html>

説明

このコードは以下の通りです。

HTML部分では、簡単な表を作成しています。表には、名前、年齢、住所 という3つの列があります。
CSS部分では、以下の2つの方法で2列目を変更するスタイルを定義しています。
- 方法1: nth-child() 疑似クラスを使って、2列目のセルに対してのみ中央揃えと薄灰色背景を設定しています。
- 方法2: 隣接兄弟セレクタを使って、1列目の次のセルに対してのみ右揃えと太めの境界線を設定しています。

実行結果

このコードを実行すると、以下のようになります。

名前	年齢	住所
田中太郎	30	東京都渋谷区
佐藤花子	25	京都府京都市
鈴木太郎	40	大阪市北区

ご覧のとおり、2列目のみが中央揃えまたは右揃えされ、背景色や境界線が変更されています。

このサンプルコードを参考に、自分のニーズに合わせてCSSを調整してください。

CSSを使って表の2列目のみを変更するその他の方法

:nth-of-type() 疑似クラスは、要素の種類に基づいてインデックス番号を指定するためのものです。この方法は、<th> 要素と <td> 要素を区別する必要がある場合に役立ちます。

table tr th:nth-of-type(2),
table tr td:nth-of-type(2) {
  /* 2列目の th 要素と td 要素にのみ適用されるスタイル */
  text-align: center; /* 中央揃え */
  background-color: #f0f0f0; /* 薄灰色背景 */
}

カラムセレクタは、CSS3で導入された新しいセレクタで、表の特定の列を選択するためのものです。

table tr :nth-child(2) {
  /* 2列目のすべてのセルに適用されるスタイル */
  text-align: center; /* 中央揃え */
  background-color: #f0f0f0; /* 薄灰色背景 */
}

方法5： JavaScriptを使う

JavaScriptを使って、動的に2列目のスタイルを変更することもできます。これは、ユーザーの操作に応じて2列目のスタイルを変更したい場合に役立ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSで表の2列目のみを変更する</title>
  <style>
    table {
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h2>CSSで表の2列目のみを変更する</h2>

  <table id="myTable">
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>住所</th>
    </tr>
    <tr>
      <td>田中 太郎</td>
      <td>30</td>
      <td>東京都渋谷区</td>
    </tr>
    <tr>
      <td>佐藤 花子</td>
      <td>25</td>
      <td>京都府京都市</td>
    </tr>
    <tr>
      <td>鈴木 太郎</td>
      <td>40</td>
      <td>大阪市北区</td>
    </tr>
  </table>

  <script>
    const table = document.getElementById('myTable');

    for (const row of table.rows) {
      const secondCell = row.cells[1];
      secondCell.style.textAlign = 'center'; /* 2列目を中央揃え */
      secondCell.style.backgroundColor = '#f0f0f0'; /* 薄灰色背景 */
    }
  </script>
</body>
</html>