Bootstrap CSS Tables 表格参考


<table> 类

使用下面的类来设置任何表格的样式:

描述 实例
.table 将基本样式(浅色填充和仅水平分隔线)添加到任何 <table> 测试一下
.table-striped 将斑马条纹添加到 <tbody> 内的任何表格行(在 IE8 中不可用) 测试一下
.table-bordered 在表格和单元格的所有边添加边框 测试一下
.table-hover 在 <tbody> 内的表行上启用悬停状态 测试一下
.table-condensed 通过将单元格填充减半,使表格更紧凑 测试一下
组合所有表类 测试一下

<tr>, <th> and <td> 类

使用以下类为表格行或单元格着色:

描述 实例
.active 将悬停颜色(浅灰色)应用于特定的行或单元格 测试一下
.success 表示成功或积极的行动 测试一下
.info 表示中性的信息变化或行动 测试一下
.warning 表示可能需要注意的警告 测试一下
.danger 表示危险或潜在的负面行为 测试一下

响应式表格

.table-responsive 类创建一个响应式表。然后表格将在小型设备上水平滚动(低于 768 像素)。在任何大于 768px 宽的东西上查看时,没有区别:

实例

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
亲自试一试 »