Bootstrapテーブルで列の後に垂直ボーダーを1本だけ表示する方法

方法1: CSSを使用する方法 まず、テーブル内の各セルにクラスを追加します。次に、CSSを使用して特定のクラスに対して右側のボーダーを設定します。

HTML:

<table class="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border-right">セル1</td>
      <td class="border-right">セル2</td>
      <td>セル3</td>
    </tr>
    <tr>
      <td class="border-right">セル4</td>
      <td class="border-right">セル5</td>
      <td>セル6</td>
    </tr>
  </tbody>
</table>

CSS:

.border-right {
  border-right: 1px solid #dee2e6;
}

この方法では、指定したクラスに対して右側のボーダーが適用されます。

方法2: Bootstrapのカスタムクラスを使用する方法 Bootstrapにはカスタムクラスを使用してデザインを変更する機能があります。以下の手順で特定の列の後に垂直ボーダーを追加できます。

HTML:

<table class="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border-right">セル1</td>
      <td class="border-right">セル2</td>
      <td>セル3</td>
    </tr>
    <tr>
      <td class="border-right">セル4</td>
      <td class="border-right">セル5</td>
      <td>セル6</td>
    </tr>
  </tbody>
</table>

CSS:

.table-bordered .border-right {
  border-right: 1px solid #dee2e6;
}

この方法では、.table-borderedクラスと.border-rightクラスを組み合わせて、特定の列の後に垂直ボーダーを追加します。

以上の方法を試してみて、お使いのデザインに最適な方法を選択してください。修正やカスタマイズが必要な場合は、CSSを調整してください。