table-bordered

bootstrap5.css

bootstrap5.css
.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
bootstrap5.css
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

html bootstrap5 Sample

罫線付きテーブル:table-bordered


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

罫線色つきテーブル:table-borderedとborder-primary


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-bordered border-primary">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>