在Bootstrap中创建一个垂直可滚动的表格,你可以使用Bootstrap的CSS类和一些自定义样式。以下是一个示例:
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
<!-- 添加更多列标题 -->
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
<!-- 添加更多单元格 -->
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
<!-- 添加更多单元格 -->
</tr>
<!-- 添加更多行 -->
</tbody>
</table>
</div>
在这个示例中,我们使用了table-responsive
类来创建一个响应式的表格容器,使表格在小屏幕设备上可以水平滚动。然后,我们使用table
类来创建一个基本的表格,并添加了table-striped
和table-bordered
类来添加条纹样式和边框样式。
如果表格的内容超过容器的高度,它将自动显示垂直滚动条,以便用户可以滚动查看更多内容。
你可以根据需要添加更多的列和行,以及自定义样式来满足你的需求。