响应式html表格 [英] Responsive vertical html table

问题描述

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

If I have a vertically defined table, with a title, like so:

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>

从左到右读取方向，向下读取每一列.我将如何使其具有移动响应能力?

Where the reading direction is left to right, reading down each column. How would I go about making it mobile responsive?

我想象每列一列，彼此堆叠.像这样:

I imagine one column each, stacked on top of each other. Like so:

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

推荐答案

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

1. Remove the table styling
2. Set the formatting context to flexbox
3. Reorder the table cells with the order property

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表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！