使用HTML和CSS创建一个响应式表格布局

能者

要创建一个响应式表格布局，您可以使用HTML和CSS。以下是一些步骤：

1. HTML 结构
首先，创建一个HTML表格结构。在`<table>`标签中，使用`<thead>`定义表头行，`<tbody>`定义表体行，并在每个行中使用`<th>`或`<td>`定义单元格。

[HTML] 纯文本查看 复制代码

<table>
  <thead>
    <tr>
      <th>表头标题1</th>
      <th>表头标题2</th>
      <th>表头标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

2. CSS 样式
接下来，使用CSS样式使表格具有响应式布局。您可以使用媒体查询和flexbox布局来实现这一点。

[CSS] 纯文本查看 复制代码

/* 定义默认样式 */
table {
  width: 100%;
}

/* 使用媒体查询，在小屏幕上进行调整 */
@media screen and (max-width: 600px) {
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
  
  /* 设置表头隐藏 */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  /* 定义每个单元格的样式 */
  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  /* 设置每个单元格的内容和样式 */
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
    font-weight: bold;
  }
}

在上面的CSS代码中，我们使用@media查询来指定在小于600px宽度的屏幕上应用的样式。这些样式根据需要将表格转换为块级元素，并隐藏表头。然后，我们使用`td:before`伪元素为每个单元格添加标签。

3. 添加 data-label
要使每个单元格具有正确的标签，请在HTML中为每个`<td>`元素添加`data-label`属性。这将被CSS样式中的`:before`伪元素所引用。

[HTML] 纯文本查看 复制代码

<tr>
  <td data-label="表头标题1">内容1</td>
  <td data-label="表头标题2">内容2</td>
  <td data-label="表头标题3">内容3</td>
</tr>

完成后，您的表格将具有响应式布局，可以适应不同大小的屏幕。