<thead> 对堆栈表的响应式 CSS答案

【问题标题】：Responsive CSS to stack table by <thead><thead> 对堆栈表的响应式 CSS
【发布时间】：2020-05-17 15:29:07
【问题描述】：

我希望能够显示下表，以便在移动设备上按标题堆叠

<table>
<thead>
    <tr>
        <th>Within the UK</th>
        <th>Outside the UK</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Within 1</td>
        <td>Outside 1</td>
    </tr>
    <tr>
        <td>Within 2</td>
        <td>Outside 2</td>
    </tr>
    <tr>
        <td>Within 3</td>
        <td>Outside 3</td>
    </tr>
    <tr>
        <td>Within 4</td>
        <td>Outside 4</td>
    </tr>
</tbody>

我希望数据在移动设备上显示如下：

Desired layout

【问题讨论】：

更新了我的答案，请看。

标签： css html-table responsive

【解决方案1】：

更新 3

根据您的屏幕截图 - 您最好不要使用表格。只是弹性div。

.ex-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    }

.ex-table > div {
    order: 0;
    flex: 0 0 50%;
    max-width: 50%;
    }

@media (max-width: 767.98px) { 
  .ex-table > div {flex: 0 0 100%; max-width: 100%;}
  .ex-table > div:nth-child(even) {order: 2;}
  .ex-table > div.title {margin-top: 10px;}
}

<div class="ex-table">
  <div class="title">Within the UK</div>
  <div class="title">Outside the UK</div>
  <div>Within 1</div>
  <div>Outside 1</div>
  <div>Within 2</div>
  <div>Outside 2</div>
  <div>Within 3</div>
  <div>Outside 3</div>
  <div>Within 4</div>
  <div>Outside 4</div>
</div>

【讨论】：

这个 HTML 会破坏原来的非响应式布局
删除了 HTML。仅添加 CSS。根据截图制作。
现在它不会使标题响应
你看过有问题的截图吗？这个 css 将根据它工作。
哦。是的。我懂了。对不起。将重写一个答案。

【解决方案2】：

试试这个响应式display: flex 表，它将堆叠在@media() 断点之下。

.yellow {
  background-color: yellow;
}
.blue {
  background-color: lightblue;
}
.tableUK {
  max-width: 800px;
  margin: 0 auto;
  font: 400 16px/1.5 sans-serif;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > div {
  flex: 0 0 100%;
}
@media (min-width: 576px) {
  .tableUK .row > div {
    flex: 0 0 20%;
  }
}
.row .title {
  color: blue;
}

用这个html

<div class="row tableUK">
  <div class="within">
    <div class="row yellow">
      <div class="title">Within the UK</div>
      <div>within 1</div>
      <div>within 2</div>
      <div>within 3</div>
      <div>within 4</div>
    </div>
  </div>
  <div class="outside">
    <div class="row blue">
      <div class="title">Outside the UK</div>
      <div>outside 1</div>
      <div>outside 2</div>
      <div>outside 3</div>
      <div>outside 4</div>
    </div>
  </div>
</div>

【讨论】：