Html 响应4x4 CSS网格

我很难创建一个快速响应的CSS网格。例如，这就是我希望在桌面上输出的内容：

________________________________________________________________________
| Stat 1 | Stat 2 | Stat 3 | Stat 4 | Stat 5 | Stat 6 | Stat 7 | Stat 8 |
|-----------------------------------------------------------------------|
| Info 1 | Info 2 | info 3 | info 4 | Info 5 | Info 6 | Info 7 | Info 8 |
-------------------------------------------------------------------------

但这就是我想要在手机上输出的内容：

_____________________________________
| Stat 1 | Stat 2 | Stat 3 | Stat 4 |
|------------------------------------
| Info 1 | Info 2 | info 3 | info 4 |
-------------------------------------
| Stat 5 | Stat 6 | Stat 7 | Stat 8 |
|-----------------------------------|
| Info 5 | Info 6 | Info 7 | Info 8 |
 ------------------------------------

我有下面的HTML和CSS在桌面上正确输出，但在手机上不能正确输出

HTML

---

首先，当您的用例看起来应该使用

时，为什么要使用div？HTML已经有了一个表元素，可以在需要这种显示时使用

其次，在不使用媒体查询的情况下，您希望如何获得响应性布局？媒体查询将使您的设计具有响应性。您应该始终确保先使用手机进行初始布局，然后使用媒体查询来显示桌面视图。以下是您试图实现的目标的简化版本：

HTML:

<table>
  <tr>
    <td>
      Stat 1
    </td>
    <td>
      Stat 2
    </td>
    <td>
      Stat 3
    </td>
    <td>
      Stat 4
    </td>
  </tr>
  <tr>
    <td>
      Info 1
    </td>
    <td>
      Info 2
    </td>
    <td>
      Info 3
    </td>
    <td>
      Info 4
    </td>
  </tr>  
</table><table>
  <tr>
    <td>
      Stat 5
    </td>
    <td>
      Stat 6
    </td>
    <td>
      Stat 7
    </td>
    <td>
      Stat 8
    </td>
  </tr>
  <tr>
    <td>
      Info 5
    </td>
    <td>
      Info 6
    </td>
    <td>
      Info 7
    </td>
    <td>
      Info 8
    </td>
  </tr>  
</table>

table tr:first-child {
  font-weight: bold;
}

@media (min-width: 300px) {
  table {
    display: inline-block;
  }
}

---

我读过的所有文档都建议将DIVS与flex一起用于响应性布局。你推荐使用表格有什么原因吗？支持性可能是不使用flexbox的一个原因，但我不明白，因为你最初的帖子使用的是带有表格CSS属性的DIV。除非你有很好的理由这样做，否则你可以简单地使用表格数据（我还是这么认为，因为我不确定你的实际用例）。使用你的代码，我在桌面视图和移动设备上得到两个表格之间的差距，第二张桌子确实落在第一张桌子下面，但桌子太宽，屏幕宽度不够，因此我必须滚动到一边才能看到它。我通过在@media调用中应用width:100%修复了第二个问题，但如何消除桌面中两个表之间的间隙？请确保将

放在同一行。由于某些原因，HTML可能对空白和新行敏感。这就是我在JSFIDLE中解决这个问题所做的。通常在将输出发送给用户之前使用HTML缩略器也有助于解决这些问题。

<table>
  <tr>
    <td>
      Stat 1
    </td>
    <td>
      Stat 2
    </td>
    <td>
      Stat 3
    </td>
    <td>
      Stat 4
    </td>
  </tr>
  <tr>
    <td>
      Info 1
    </td>
    <td>
      Info 2
    </td>
    <td>
      Info 3
    </td>
    <td>
      Info 4
    </td>
  </tr>  
</table><table>
  <tr>
    <td>
      Stat 5
    </td>
    <td>
      Stat 6
    </td>
    <td>
      Stat 7
    </td>
    <td>
      Stat 8
    </td>
  </tr>
  <tr>
    <td>
      Info 5
    </td>
    <td>
      Info 6
    </td>
    <td>
      Info 7
    </td>
    <td>
      Info 8
    </td>
  </tr>  
</table>

table tr:first-child {
  font-weight: bold;
}

@media (min-width: 300px) {
  table {
    display: inline-block;
  }
}