html - 如何按列拆分 html 表格以进行响应式设计

Question

我们已经在网络和 SO 上检查了此问题的解决方案，但没有找到任何可以解决我们的具体问题的方法。

我们使用以下表格格式作为联系公式:

<table>
  <tr>
    <td colspan="2">COL1-2</td>
    <td colspan="2">COL3-4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
</table>

使用媒体查询，是否可以使 COLS3 和 4 位于 COLS1 和 2 之下(见下文)？

<table>
  <tr>
    <td colspan="2">COL1-2</td>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td colspan="2">COL3-4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
</table>

Answer 1

是的，但不完全是在 CSS 中。您可以重构表，以便将列 1 和 2 嵌套在表中，将列 3 和 4 嵌套在表中。如果您这样重新构造表格，则可以创建一个媒体查询来分配两个表格中的每一个显示 block ，因此右侧的表格将包裹在左侧的表格下方。

table table { display:inline-block;vertical-align:top; }

<table border="1">
      <tr>
          <td class="wrap">
              <table border="1">
                  <tr><td colspan="2">COL1-2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
              </table>
              <table border="1">
                  <tr><td colspan="2">COL3-4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
              </table>
          </td>
      </tr>
    </table>

table 表 { 显示: block ； } 换行。