Bootstrap5サンプル検索

bootstrap5.css

table {
  border-collapse: collapse;
}

bootstrap5.css

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

bootstrap5.css

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

bootstrap5.css

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

bootstrap5.css

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

bootstrap5.css

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

bootstrap5.css

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

bootstrap5.css

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

bootstrap5.css

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

bootstrap5.css

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

bootstrap5.css

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

bootstrap5.css

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

bootstrap5.css

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}

bootstrap5.css

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}

bootstrap5.css

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}

bootstrap5.css

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}

bootstrap5.css

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}

bootstrap5.css

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}

bootstrap5.css

.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}

bootstrap5.css

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}

bootstrap5.css

.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}

bootstrap5.css

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}

bootstrap5.css

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

bootstrap5.css

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}

bootstrap5.css

.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}

bootstrap5.css

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}

bootstrap5.css

.table-hover .table-info:hover {
  background-color: #abdde5;
}

bootstrap5.css

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}

bootstrap5.css

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}

bootstrap5.css

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}

bootstrap5.css

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

bootstrap5.css

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}

bootstrap5.css

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}

bootstrap5.css

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}

bootstrap5.css

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

bootstrap5.css

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}

bootstrap5.css

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

bootstrap5.css

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}

bootstrap5.css

.table-hover .table-light:hover {
  background-color: #ececf6;
}

bootstrap5.css

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

bootstrap5.css

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}

bootstrap5.css

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}

bootstrap5.css

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

bootstrap5.css

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}

bootstrap5.css

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

bootstrap5.css

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

bootstrap5.css

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

bootstrap5.css

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

bootstrap5.css

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

bootstrap5.css

.table-dark {
  color: #fff;
  background-color: #343a40;
}

bootstrap5.css

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}

bootstrap5.css

.table-dark.table-bordered {
  border: 0;
}

bootstrap5.css

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

bootstrap5.css

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

bootstrap5.css

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

bootstrap5.css

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

bootstrap5.css

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

bootstrap5.css

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

bootstrap5.css

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

bootstrap5.css

.table-responsive > .table-bordered {
  border: 0;
}

bootstrap5.css

.d-table {
  display: table !important;
}

bootstrap5.css

.d-table-row {
  display: table-row !important;
}

bootstrap5.css

.d-table-cell {
  display: table-cell !important;
}

bootstrap5.css

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

bootstrap5.css

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

bootstrap5.css

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

bootstrap5.css

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

bootstrap5.css

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

bootstrap5.css

@media print {
  /* 印刷字に利用するCSS　mediaで大きく括って、それぞれのタグの設定をする */
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

テーブルの基本スタイル：table

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

罫線付きテーブル：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>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

罫線無しテーブル：table-borderless

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table table-borderless">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブルthead：thead-dark

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table">
    <thead class="thead-dark">
      <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブルthead： thead-light

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table">
    <thead class="thead-light">
      <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

背景色用のクラス：bg-*

タイトル	タイトル	タイトル	タイトル
なし（標準）	データ	データ	データ
bg-primary	データ	データ	データ
bg-success	データ	データ	データ
bg-warning	データ	データ	データ
bg-danger	データ	データ	データ
bg-info	データ	データ	データ

  <bg-warning text-dark">table class="bg-warning text-dark">table bg-warning text-dark">table-dark">
    <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 class="bg-primary">
        <td>bg-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-success">
        <td>bg-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-warning">
        <td>bg-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-danger">
        <td>bg-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-info">
        <td>bg-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </bg-warning text-dark">table>

th,tdの背景色：bg-*

th（標準）	th.bg-primary
td.bg-success	td.bg-warning
td.bg-danger	td.bg-info

  <bg-warning text-dark">table class="bg-warning text-dark">table bg-warning text-dark">table-dark">
    <tr>
      <th>th（標準） </th>
      <th class="bg-primary">th.bg-primary</th>
    </tr>
    <tr>
      <td class="bg-success">td.bg-success</td>
      <td class="bg-warning">td.bg-warning</td>
    </tr>
    <tr>
      <td class="bg-danger">td.bg-danger </td>
      <td class="bg-info">td.bg-info</td>
    </tr>
  </bg-warning text-dark">table>

テーブル trの背景色：table-*

背景色用のクラス	タイトル	タイトル	タイトル
なし（標準）	データ	データ	データ
table-active	データ	データ	データ
table-primary	データ	データ	データ
table-secondary	データ	データ	データ
table-success	データ	データ	データ
table-danger	データ	データ	データ
table-warning	データ	データ	データ
table-info	データ	データ	データ
table-light	データ	データ	データ
table-dark	データ	データ	データ

  <table class="table">
    <thead>
      <tr>
        <th scope="col">背景色用のクラス</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>なし（標準）</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-active">
        <td>table-active</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-primary">
        <td>table-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-secondary">
        <td>table-secondary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-success">
        <td>table-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-danger">
        <td>table-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-warning">
        <td>table-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-info">
        <td>table-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-light">
        <td>table-light</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-dark">
        <td>table-dark</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

th,tdの背景色：table-*

th（標準）	table-active
table-primary	table-secondary
table-success	table-danger
table-warning	table-info
table-light	table-dark

  <table class="table">
    <tr>
      <td>th（標準） </th>
      <td class="table-active">table-active</th>
    </tr>
    <tr>
      <td class="table-primary">table-primary</td>
      <td class="table-secondary">table-secondary</td>
    </tr>
    <tr>
      <td class="table-success">table-success </td>
      <td class="table-danger">table-danger</td>
    </tr>
    <tr>
      <td class="table-warning">table-warning</td>
      <td class="table-info">table-info</td>
    </tr>
    <tr>
      <td class="table-light">table-light </td>
      <td class="table-dark">table-dark</td>
    </tr>
  </table>

テーブルの色の反転：table-dark

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table table-dark">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブル行のマウスオーバー：table-hover

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table table-hover">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-hover table-dark">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

縞模様のテーブル：table-striped

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table table-striped">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テキストが折り返さないように設定する：text-nowrap

途中で折り返しなし	折り返しても良い

  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">途中で折り返しなし</th>
      <td>折り返しても良い</td>
    </tr>
  </table>

テーブル：table-sm

タイトル	タイトル	タイトル	タイトル
タイトル	データ	データ	データ
タイトル	データ	データ	データ
タイトル	データ	データ	データ

  <table class="table table-sm">
    <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

レスポンシブテーブル：table-responsive

タイトル	タイトル	タイトル	タイトル	タイトル
データ	データ	データ	データ	データ

  <!-- tableタグに設定するのではなく、divで囲む -->
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <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>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルsm未満：table-responsive-sm

タイトル	タイトル	タイトル	タイトル	タイトル
データ	データ	データ	データ	データ

  <div class="table-responsive-sm mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <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>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルmd未満：table-responsive-md

タイトル	タイトル	タイトル	タイトル	タイトル
データ	データ	データ	データ	データ

  <div class="table-responsive-md mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <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>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルlg未満：table-responsive-lg

タイトル	タイトル	タイトル	タイトル	タイトル
データ	データ	データ	データ	データ

  <div class="table-responsive-lg mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <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>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルxl未満：table-responsive-xl

タイトル	タイトル	タイトル	タイトル	タイトル
データ	データ	データ	データ	データ

  <div class="table-responsive-xl mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <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>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

table

bootstrap5.css

html bootstrap5 Sample

テーブルの基本スタイル：table

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

罫線無しテーブル：table-borderless

テーブルthead：thead-dark

テーブルthead： thead-light

背景色用のクラス：bg-*

th,tdの背景色：bg-*

テーブル trの背景色：table-*

th,tdの背景色：table-*

テーブルの色の反転：table-dark

テーブル行のマウスオーバー：table-hover

縞模様のテーブル：table-striped

テキストが折り返さないように設定する：text-nowrap

テーブル：table-sm

レスポンシブテーブル：table-responsive

レスポンシブテーブルsm未満：table-responsive-sm

レスポンシブテーブルmd未満：table-responsive-md

レスポンシブテーブルlg未満：table-responsive-lg

レスポンシブテーブルxl未満：table-responsive-xl