打断 Table 行 CSS

Question

我正在尝试将 3 tables（命名为 table 1、2、3）水平放置在桌面上（完成）。对于移动设备（这里需要你的帮助），我想让 table 2 在 table 1 下，依此类推，table 3 在 table 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

我想在屏幕分辨率降低时将其变成这样，使其响应迅速 table 并分解列：

mobile responsive

Link : enter link description here

你相信这是可能的吗？任何人都可以帮助“菜鸟”吗？非常感谢您

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 source 移动优先设计）

示例中使用了 CSS 网格。 CSS 网格给你很大的灵活性 'stacking' 不同屏幕尺寸的 div。（如果愿意，您甚至可以更改 div 的顺序。）(CSS-tricks source)

通常你不想改变 table 本身的 CSS 显示属性因为那样你就失去了 结构标记。 (w3.org source) This is troublesome for accessibility. (w3.org source)

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

打断 Table 行 CSS

Break Table Rows CSS

html

css

break

responsive