沃梦达 / 编程技术 / 前端开发 / 正文

Bootstrap CSS布局之表格

沃梦达教程前端开发

2023-12-21 7

下面就是Bootstrap CSS布局之表格的完整攻略。

下面就是Bootstrap CSS布局之表格的完整攻略。

Bootstrap CSS布局之表格

Bootstrap是一个流行的CSS框架, 提供了大量预设的CSS样式和JavaScript插件。其中，表格是Bootstrap提供的一种常用的布局方式。Bootstrap表格具有响应式设计，能够适应各种大小的屏幕，如手机和平板电脑。

一个简单的表格

下面是一个简单的Bootstrap表格，包含了表头和一些数据行。代码如下：

<table class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>19</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小强</td>
      <td>20</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

合并单元格

有时候需要将表格中的某些单元格合并起来，Bootstrap提供了合并单元格的功能。可以通过设置colspan和rowspan属性来实现单元格合并。例如，下面是一个带合并单元格的表格示例，其中第一行和第二行的第一列单元格合并成了一个单元格：

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>车型</th>
      <th>颜色</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">轿车</td>
      <td>奔驰</td>
      <td>红色</td>
    </tr>
    <tr>
      <td>宝马</td>
      <td>白色</td>
    </tr>
    <tr>
      <td>卡车</td>
      <td>沃尔沃</td>
      <td>蓝色</td>
    </tr>
  </tbody>
</table>