我希望能够显示以下表格,使其在手机上的页眉处堆叠。
<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>
我希望数据能在手机上显示如下。
已更新 3
根据你的截图--你最好不要使用表格。只是flex divs。
.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>
试试这个响应式 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>