如何使用CSS实现响应式表格布局？

使用CSS实现响应式表格布局的关键是利用媒体查询（media query）和弹性布局（flexbox）来适应不同的屏幕尺寸和设备。以下是实现响应式表格布局的步骤：

1. 使用<table>标签创建表格结构，并对表格设置合适的宽度、边框和间距等样式属性。

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

2. 使用<thead>、<tbody>和<tfoot>标签分别定义表格的头部、主体和尾部内容，并对它们设置相应的样式属性。

thead {
  background-color: #f9f9f9;
  font-weight: bold;
}
tbody {
  background-color: #fff;
}
tfoot {
  background-color: #f9f9f9;
  font-weight: bold;
}

3. 使用<tr>和<th>或<td>标签创建表格的行和单元格，并对它们设置合适的样式属性。

tr {
  border-bottom: 1px solid #ccc;
}
th, td {
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

4. 使用媒体查询和弹性布局来适应不同的屏幕尺寸和设备。例如，当屏幕宽度小于等于768px时，将表格的行和单元格设置为弹性布局，并将单元格的显示方式改为块级元素，以实现响应式的效果。

@media screen and (max-width: 768px) {
  table, thead, tbody, tfoot, tr, th, td {
    display: block;
  }
  tr {
    border: none;
  }
  th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
  }
}

在上述代码中，我们使用了max-width: 768px来定义屏幕宽度小于等于768px时的媒体查询条件，然后将表格和所有的子元素都设置为块级元素。接着，我们使用了绝对定位和负的偏移量来将表头隐藏在屏幕之外，然后使用相对定位和左侧内边距来将单元格的内容居中，并使用:before伪元素来在单元格的左侧添加标签名称。

最终，我们可以得到一个实现了响应式表格布局的示例代码，如下所示：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="姓名">张三</td>
      <td data-label="年龄">28</td>
      <td data-label="性别">男</td>
      <td data-label="职业">工程师</td>
    </tr>
    <tr>
      <td data-label="姓名">李四</td>
      <td data-label="年龄">35</td>
      <td data-label="性别">女</td>
      <td data-label="职业">设计师</td>
    </tr>
    <tr>
      <td data-label="姓名">王五</td>
      <td data-label="年龄">42</td>
      <td data-label="性别">男</td>
      <td data-label="职业">经理</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总计</th>
      <td>105</td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

完整的CSS样式代码可以参考以下示例：

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
thead {
  background-color: #f9f9f9;
  font-weight: bold;
}
tbody {
  background-color: #fff;
}
tfoot {
  background-color: #f9f9f9;
  font-weight: bold;
}
tr {
  border-bottom: 1px solid #ccc;
}
th, td {
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
@media screen and (max-width: 768px) {
  table, thead, tbody, tfoot, tr, th, td {
    display: block;
  }
  tr {
    border: none;
  }
  th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
  }
}

最后，我们可以将上述示例代码和CSS样式代码复制到一个HTML文件中，并在浏览器中查看效果，以验证响应式表格布局是否正确实现。