У меня есть 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 определит, подходит ли таблица к ширине контейнера, и если нет, переверните видимость таблицы, чтобы показать вертикальную
- прокручиваемый контейнер и горизонтальный стол (я не люблю этот метод)
Как вы думаете, что лучший способ решить это?