响应式垂直html表格

Question

如果我有一个垂直定义的表格，带有标题，如下所示：

https://codepen.io/Slagon/pen/YzGbgza

    <table>
<thead>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th>Heading 5</th>
    <th>Heading 6</th>
    <th>Heading 7</th>
    <th>Heading 8</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
</tbody>
</table>

阅读方向是从左到右，向下阅读每一列。 我将如何使其具有移动响应能力？

我想象每列一列，相互堆叠。像这样：

https://codepen.io/Slagon/pen/bGwyZdJ

Answer 1

1. 删除表格样式
2. 将格式化上下文设置为 flexbox
3. 使用order 属性重新排列表格单元格

table * {
  display: contents;
}
table {
  display: flex;
  flex-direction:column;
}
th, td {
  display:block;
  text-align:center;
}
tr > *:nth-child(1) { order:1;}
tr > *:nth-child(2) { order:2;}
tr > *:nth-child(3) { order:3;}
tr > *:nth-child(4) { order:4;}
tr > *:nth-child(5) { order:5;}
tr > *:nth-child(6) { order:6;}
tr > *:nth-child(7) { order:7;}
tr > *:nth-child(8) { order:8;}

<table>
<thead>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th>Heading 5</th>
    <th>Heading 6</th>
    <th>Heading 7</th>
    <th>Heading 8</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
</tbody>
</table>

Answer 2

您正在寻找的是媒体查询。使用媒体查询，您可以使用基于页面最大/最小宽度的 CSS 设置页面样式。

查看此内容以获取更多信息。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

这是一个示例，当屏幕的最大宽度为 900 像素时，将应用以下 CSS。超出该范围的任何内容都将应用上述 CSS

.example {
  font-size: 7rem;
  width: 75%;
}

@media screen and (max-width: 900px){

.example {
  font-size: 3.5rem;
  width: 50%;
}

}