Bootstrap响应式表格详解

Bootstrap是一款流行的前端框架，可以帮助开发者快速构建响应式的网页设计。其中，Bootstrap还提供了响应式表格的功能，可以在不同的设备上呈现完美的展示效果。本文将介绍Bootstrap响应式表格的使用方法和常见示例。

1. 基本用法

1.1 表格结构

Bootstrap的表格结构同传统的HTML表格结构类似，使用<table>标签来定义表格。在其中使用<thead>、<tbody>和<tfoot>标签来定义表格的头、主体和底部。具体代码如下：

<table class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品A</td>
      <td>100元</td>
      <td>10个</td>
    </tr>
    <tr>
      <td>产品B</td>
      <td>200元</td>
      <td>20个</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>30个</td>
    </tr>
  </tfoot>
</table>

1.2 表格样式

Bootstrap提供了多种表格样式，可以在表格上添加不同的类名来实现。常见的表格样式如下：

类名	描述
table	基础表格样式
table-striped	斑马纹表格样式，相邻行使用不同的颜色
table-hover	鼠标悬停表格样式，行在鼠标悬停时改变颜色
table-bordered	边框表格样式

具体代码如下：

<table class="table table-striped table-bordered table-hover">
  ...
</table>

2. 响应式表格

在移动设备上，传统的表格结构可能会因为排版问题而导致显示效果不佳。Bootstrap提供了响应式表格的功能，可以在小屏幕设备上以列表的形式呈现，避免了排版问题。

2.1 基本用法

要使用响应式表格，需要在<table>标签上添加table-responsive类名，如下所示：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

2.2 示例说明

2.2.1 基本响应式表格实现

以下是一个基本响应式表格的实现示例。可以通过单击“查看演示”按钮查看效果。在移动设备上，表格会以列表的形式呈现。

````markdown

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>20</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</div>

2.2.2 自定义响应式表格实现

以下是一个自定义响应式表格的实现示例。可以通过单击“查看演示”按钮查看效果。在移动设备上，表格会显示为一列一行的形式。

```html
<div class="table-responsive">
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>月份</th>
        <th>收入</th>
        <th>支出</th>
        <th>结余</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>一月</th>
        <td>1000元</td>
        <td>800元</td>
        <td>200元</td>
      </tr>
      <tr>
        <th>二月</th>
        <td>1200元</td>
        <td>600元</td>
        <td>600元</td>
      </tr>
      <tr>
        <th>三月</th>
        <td>1500元</td>
        <td>900元</td>
        <td>600元</td>
      </tr>
    </tbody>
  </table>
</div>