javascript - HTML表格响应，水平到垂直

Question

我有一个 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 确定表格是否适合容器宽度，如果不适合，则翻转表格的可见性以显示垂直的一张
• 可滚动容器并使表格保持水平（我根本不喜欢那种方法）

您认为解决此问题的最佳方法是什么？

标签： javascriptjqueryhtmlcssflexbox

Answer 1

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

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