html - 4 列 TD 表在移动屏幕中使用 CSS 转换为 2 列（无 TH）

Question

我想制作一个响应式表格，该表格连续有 4 列（4x1），并且想在最大宽度中连续显示 2 列：600px [移动屏幕]（2x2），我的代码正在运行但有 4x4 . 如何纠正css。输出应该是这样的。

桌面 -

----    ----      ----      ----
 A       B         C         D
----    ----      ----      ----

移动的

----    ---- 
 A       B  
----    ----
----    ---- 
 C       D  
----    ----

table {
  width: 100%;
  border-collapse: collapse;
  background: rgb(196, 215, 70)
}

tr:nth-child(2n) {
  background: lightblue;
}

th, :before {
  background: tomato;
  box-shadow: inset 0 0 0 2px;
}

th, td {
  box-shadow: inset 0 0 0 2px;
  text-align: center;
  vertical-align: middle;
  padding: 0.5em;
  vertical-align: middle;
}

@supports (display: contents) {
  /* trick works if data-time attributes stands in html and if display:contents is supported */
  @media screen and (max-width: 768px) {
    table {
      display: flex;
      flex-flow: column;
    }
    thead, tr, tbody {
      display: contents;
    }
    tr th:first-child {
      display: none;
    }
    th {
      background: red;
    }
    td {
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
    }
    td:before {
      content: attr(data-time);
      border-right: solid 1px;
      display: table-cell;
      vertical-align: middle;
      white-space: pre;
      /* only if you care */
      padding: 0.25em;
    }
    tr :nth-child(2) {
      order: 0;
    }
    tr :nth-child(3) {
      order: 1;
    }
    tr :nth-child(4) {
      order: 2;
    }
    tr :nth-child(5) {
      order: 3;
    }
    tr :nth-child(6) {
      order: 4;
    }
    tr :nth-child(7) {
      order: 5;
    }
  }
}

<table>
  <tbody>
    <tr>
      <td>
        <p>A</p>
      </td>
      <td>
        <p>B</p>
      </td>
      <td>
        <p>C</p>
      </td>
      <td>
        <p>D</p>
      </td>
    </tr>
  </tbody>
</table>

标签： htmlcss