table-responsive-sm
bootstrap5.css
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>