CSS Bootstrap响应式表格 -> 切换行和列

在本文中，我们将介绍如何使用CSS和Bootstrap来创建响应式表格，并展示如何切换行和列的布局。

阅读更多：CSS 教程

什么是响应式表格？

响应式表格是一种能够适应不同屏幕大小和设备的表格布局。它可以在大屏幕上以传统的行和列的形式显示，但在小屏幕上能够自动改变布局，以适应更紧凑的空间。

使用Bootstrap创建基本表格

首先，我们需要引入Bootstrap的CSS文件，可以使用CDN链接或下载到本地。然后，使用HTML创建一个基本的表格结构，如下所示：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Mike</td>
      <td>35</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

这是一个简单的表格，包含四列：编号、名称、年龄和性别。我们使用<thead>元素定义表格头部，<th>元素定义表格头部的每一列。表格的内容在<tbody>元素中定义，每一行由<tr>元素表示，每个单元格使用<td>元素。

使用CSS和媒体查询创建响应式表格

现在我们要为表格添加响应式布局。使用媒体查询，我们可以根据屏幕宽度来调整表格的布局。下面是一个例子，当屏幕宽度小于768px时，表格将切换为列布局：

@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
  }

  .table-responsive table {
    width: 100%;
    display: block;
  }

  .table-responsive table thead {
    display: none;
  }

  .table-responsive table tr {
    display: block;
    margin-bottom: 10px;
  }

  .table-responsive table td {
    display: block;
    text-align: left;
  }
}

在上面的CSS代码中，我们使用@media查询当屏幕宽度小于767px时生效。.table-responsive类用于包裹表格，并添加overflow-x: auto;使得当表格过长时，可以通过水平滚动条来查看。接下来，我们给表格添加一些样式，使其在小屏幕上呈现列布局的效果。

示例演示

下面是一个完整的示例，展示了在不同屏幕大小下表格布局的变化效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
  <style>
  @media (max-width: 767px) {
    .table-responsive {
      overflow-x: auto;
    }

    .table-responsive table {
      width: 100%;
      display: block;
    }

    .table-responsive table thead {
      display: none;
    }

    .table-responsive table tr {
      display: block;
      margin-bottom: 10px;
    }

    .table-responsive table td {
      display: block;
      text-align: left;
    }
  }
  </style>
  <title>Responsive Table</title>
</head>
<body>
  <div class="container">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>25</td>
            <td>Male</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jane</td>
            <td>30</td>
            <td>Female</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Mike</td>
            <td>35</td>
            <td>Male</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

你可以将上面的代码保存为一个HTML文件，然后在浏览器中打开以查看效果。