响应垂直 html table

Question

如果我有一个垂直定义的 table，标题如下：

    <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

您正在寻找的是媒体查询。使用媒体查询，您可以根据页面 max/min 宽度使用 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%;
}

}

Answer 2

删除 table 样式
将格式化上下文设置为 flexbox
使用 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>

响应垂直 html table

Responsive vertical html table

html

css

flexbox

grid-layout