有没有一种方法可以将表单元格任意地堆叠在一起？ （用于响应式设计）

Question

我希望表具有一定的响应能力（是的，我知道表“不应被响应地使用”，但这就是我们现在要使用的位置）

具体地说，该表有4个相关的小单元，如果屏幕足够小，则需要堆叠2x2。我能够使单元格与display：块堆叠，但是将它们堆叠为4x1。我希望能够有选择地应用某种样式（我想将其应用于第二个（或第二个）单元格），以强制其中断。

td {
  display: block;
}

我能够破解它以使其与幻像表单元一起工作，但这比“在响应式设计中使用表”要复杂得多，因为它会在标记中添加多余的元素。

在没有“没有” td的情况下，是否有更好的方法来达到这种效果？ http://jsfiddle.net/2rLpme4s/

Answer 1

这样做似乎很奇怪，但是您可以通过在媒体查询后面设置CSS网格以仅在特定条件下中断表格显示来轻松实现此目的。在这里，我任意选择40em。调整浏览器的大小以查看效果，我尝试使用该技术不需要的其他样式来弄清楚该效果：

@media screen and (max-width: 40em) {  
  tr {
    display: grid;
  }

  td {
    grid-row: 1 / 3;
  }

  td.stat {
    grid-row: 1;
  }

  td.stat2 {
    grid-row: 2;
  }

  /* Extra styles just for clarity */
  table {
    width: 100%;
  }

  td {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid #ff00ff;
    padding: .5em;
  }
}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>A </td>
    <td>B </td>
    <td>C </td>
    <td class="stat">D </td>
    <td class="stat2">E </td>
    <td class="stat">F </td>
    <td class="stat2">G </td>
    <td>H </td>
  </tr>
</table>

这是通过将表数据单元格设置为从第一行到第三行（1/3）的开头（即两行），然后使用.stat和.stat2选择器来进行的分别在第一行或第二行中进行设置。