让表格适应不同屏幕尺寸

让我们把表格变成一个可隐藏的列表。

第一步，我们需要给表格添加一个类，以便我们可以在CSS中引用它。

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td>学生</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
      <td>教师</td>
    </tr>
  </tbody>
</table>

然后，我们需要在CSS中创建一个媒体查询，以便我们可以在移动设备和平板电脑上应用不同的样式。

@media (max-width: 768px) {
  .table {
    display: block;
  }
  .table thead {
    display: none;
  }
  .table tbody tr {
    border-bottom: 1px solid #ddd;
  }
  .table tbody tr:last-child {
    border-bottom: none;
  }
  .table tbody tr td {
    display: block;
    width: 100%;
  }
}

在这个媒体查询中，我们首先将表格设置为块级元素，这样它就会在移动设备和平板电脑上换行。然后，我们隐藏表格的表头，这样表头就不会在移动设备和平板电脑上显示。接下来，我们给表格的主体中的每一行添加一个边框，这样每一行都会在移动设备和平板电脑上显示为一个单独的项目。最后，我们给表格的主体中的每一行中的每一个单元格添加一个宽度，这样每个单元格都会在移动设备和平板电脑上显示为一个单独的项目。

现在，当我们在移动设备和平板电脑上查看表格时，表格就会自动调整大小以适应屏幕的宽度，并且表头不会显示。当我们在台式机上查看表格时，表格就会以正常的方式显示。

除了使用CSS3的媒体查询和显示属性来创建响应式表格之外，我们还可以使用其他技术来实现可隐藏列表格。例如，我们可以使用JavaScript来控制列的显示和隐藏。但是，使用CSS3的媒体查询和显示属性来实现可隐藏列表格更加简单和方便。