断开表行CSS

Question

我正试图在桌面上水平放置3个表(命名为表1、表2、表3((完成(。对于移动设备(这里需要您的帮助(，我想将表2放在表1下面，以此类推，将表3放在表2下面。就像我将要添加的示例一样。

<table class="calculator">
<tr>
<th class="col1"></th>
<th class="col2"></th>
<th class="col3"></th>
</tr>
<tr>
<td>INSERIR VENDA</td>
<td>DOCUMENTACAO COMERCIAL</td>
<td>INSERIR RECLAMACAO</td>
<td>FAQs</td>
</tr>
<tr>
<td>GESTAO ENCOMENDAS</td>
<td>ESTADO FINANCIAMENTO</td>
<td>GESTAO RECLAMACOES</td>
<td>QUESTÕES PARA FAQs</td>
</tr>
<tr>
<td>PLANNING ENTREGAS</td>
<td>REGISTO FINANCIAMENTO</td>
<td></td>
<td></td>
</tr>
<tr>
<td>STATUS</td>
<td>PEDIR APOIO VENDA</td>
<td>VIATURA SERVICO</td>
</tr>
<tr>
<td>DOCUMENTACAO EM FALTA</td>
<td>ESTADO DO PEDIDO APOIO</td>
<td></td>
<td></td>
</tr>
</table>

这看起来像这样：https://codepen.io/dolive/pen/ExPpbwg

当屏幕分辨率降低时，我想把它变成这样，使它成为一个响应表并分解列：

移动响应

链接：在此处输入链接描述

你相信这是可能的吗？有人可能帮助一个"；noob"；出来提前非常感谢

Answer 1

根据您给出的示例，我不确定您希望如何显示数据本身(除了列的方向(。

以下是如何使用CSS来堆叠列：

/*
On mobile devices the divs are already vertically stacked,
so only on larger screen sizes they will have to be horizontally stacked
*/
@media only screen and (min-width: 768px) {
.grid__container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
}

<div class="grid__container">
<div class="grid__item">
<p>First block</p>
</div>
<div class="grid__item">
<p>Second block</p>
</div>
<div class="grid__item">
<p>Third block</p>
</div>
</div>

动机：

一种常见的做法是从移动视图开始，然后随着屏幕大小的增长逐渐增强网站。(UXPin源于移动设备首次设计(

示例中使用了CSS网格。CSS网格为您提供了很大的灵活性，可以为不同的屏幕大小"堆叠"div。(如果你愿意，你甚至可以改变div的顺序。((CSS技巧来源(

通常，您不想更改表本身的CSS显示属性，因为这样会丢失结构标记。(w3.org来源(这对可访问性来说很麻烦。(w3.org来源(

768px是一个断点。这是您希望列改变方向的点。(w3schools.org来源(