bootstrap_ref_css_tables

Bootstrap 5 CSS 表格参考

表格样式类

使用这些基础类来设置你的 HTML 表格样式。借助 Bootstrap 5，你可以轻松为表格带来简洁、现代的外观。

类名 描述 示例

.table 为任何

添加基础样式（轻微内边距和水平分割线）。这是所有表格样式的基础类。 尝试一下

.table-striped 为

中的表格行添加斑马条纹，以提高可读性。通过 CSS :nth-child 选择器实现。 尝试一下

.table-bordered 为表格和所有单元格添加边框。 尝试一下

.table-borderless 移除表格和单元格的所有边框，包括 .table 默认的顶部边框。 尝试一下

.table-hover 为

中的表格行启用悬停状态（背景颜色会轻微变化）。 尝试一下

.table-sm 将单元格内边距减半，使表格更紧凑。替代了旧版的 .table-condensed 类。 尝试一下

.caption-top 将表格标题（

元素）定位在表格上方。 尝试一下

组合表格类 这些类可以组合使用，创建更定制化的表格样式。例如：

尝试一下

行和单元格的情境类

使用这些情境类为表格行（

）或单个单元格（

,

）着色。这些类通过颜色传达特定的含义。 类名 描述 示例 .table-active 为特定行或单元格应用类似悬停的颜色，常用于表示活动选中状态。 尝试一下 .table-primary 表示主要操作或信息（通常为蓝色）。 尝试一下 .table-secondary 表示次要操作或不太重要的信息（通常为灰色）。 尝试一下 .table-success 表示成功或积极的操作（通常为绿色）。 尝试一下 .table-danger 表示危险或潜在负面操作（通常为红色）。 尝试一下 .table-warning 表示可能需要注意的警告（通常为黄色/橙色）。 尝试一下 .table-info 表示中性的信息变更或操作（通常为浅蓝色/青色）。 尝试一下 .table-light 指定行或单元格为浅灰色背景。 尝试一下 .table-dark 指定深灰色背景，常用于表头或反色效果。 尝试一下 响应式表格 要使表格具有响应性，将任何 .table 包裹在 .table-responsive 中。这将使表格在小型设备上（低于特定断点）水平滚动。你也可以使用针对特定断点的响应式类，例如 .table-responsive-sm、.table-responsive-md 等，来控制表格何时开始滚动。 例如，.table-responsive-md 将使表格在屏幕宽度小于 768px（Bootstrap 的 ‘md’ 断点）时水平滚动。 <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <!-- Example for responsive table up to medium breakpoint --> <!-- 针对中等断点及以下的响应式表格示例 --> <div class="table-responsive-md"> <table class="table"> <!-- table content --> <!-- 表格内容 --> </table> </div> 应用场景：在管理后台显示用户数据。响应式表格确保即使在小屏幕上也能访问所有用户详情，必要时通过水平滚动实现。情境类可以用来高亮新用户（.table-info）或逾期未付款的用户（.table-danger）。 有关更高级的表格特性和定制，请参考 Bootstrap 官方文档中关于表格的部分。