HTML 表格响应式，水平到垂直

Question

我有一个 HTML 表格，它有 2-3 行，不同的列数，通常为 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判断表格是否适合容器宽度，如果不适合，翻转表格的可见性以显示垂直的
• 可滚动容器并使表格保持水平（我根本不喜欢这种方法）

你认为解决这个问题的最好方法是什么？

Answer 1

我最终做的是同时创建两个表，垂直和水平，默认为水平。 然后在调整窗口大小时，如果表容器比它的容器宽，我会隐藏水平并显示垂直。

这允许调整水平线的大小并包裹单元格内容，直到它不再适合为止。