【发布时间】：2019-06-10 20:33:51
【问题描述】：
我有一个 2-3 行的 HTML 表格，列数不同，通常为 4-8。桌子可以放入各种宽度的容器中；有时是固定宽度（如侧边栏），有时是窗口宽度。
如果容器不够大，无法容纳桌子的宽度，我想做的是改变桌子的方向。我不想换行表格的内容。
所以如果是水平的：
Date Match 1 Match 2 Match 3 Match 4
1/6/2019 3-4 1-2 5-6 7-8
1/16/2019 1-7 4-6 3-5 2-8
现在如果窗口改变了宽度并且该表格的内容无法容纳，它应该显示：
Date 1/6 1/16
Match 1 3-4 1-7
Match 2 1-2 4-6
Match 3 5-6 3-5
Match 4 7-8 2-8
我已经考虑了很多方法来做到这一点：
- Flexbox（在这种情况下想不出那个）
- 生成两个表格，一个是隐藏的，并让 javascript 确定表格是否适合容器宽度，如果不适合，则翻转表格的可见性以显示垂直的一个
- 可滚动容器并让表格保持水平（我根本不喜欢这种方法）
您认为解决这个问题的最佳方法是什么？
【问题讨论】：
-
我个人只会生成两个表并使用媒体查询来隐藏和显示它们。这将是最简单的，并且可以节省您尝试在 JavaScript 中实现某些东西的时间。
-
不能使用媒体查询，因为容器宽度可能会改变，并且列数可能会改变，因此没有硬性规定可以说明表格是否适合容器。
-
看到了。你认为哪个答案是正确的？当表格的宽度大于容器时，我需要它来转换。
标签： javascript jquery html css flexbox