table-responsive-sm

bootstrap5.css

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

html bootstrap5 Sample

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

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

  <!-- レスポンシブテーブルの最大ブレークポイントを指定します -->
  <!-- smまではスクロールなしで、それ以上は、スクロール表示 -->
  <!-- そのブレークポイント以降では、テーブルは正常に動作し、水平方向にはスクロールしない -->
  <!-- bootstrap5:table-responsive-sm、md、-lg、-xl、-xxl -->
  <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>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>