响应 CSS 堆叠 table <thead>

Question

我希望能够显示以下内容 table 以便它在移动设备上按 header 堆叠

<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

Answer 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>

Answer 2

试试这个响应式 display: flex table，它将堆叠在 @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>

响应 CSS 堆叠 table <thead>

Responsive CSS to stack table by <thead>

css

html-table

responsive