У меня есть таблица, в которой я хотел бы настроить макет на меньших экранах. Я возился с этим весь день, и я застрял. Я не уверен, что формат <table> подходит, или мне нужно использовать только <div> flexbox? Я использую Bootstrap 4.1, но решением может быть пользовательский CSS (или SCSS)
Формат выглядит следующим образом:
На больших экранах - стандартное расположение таблиц с колонками 1 и 2 будет эллиптическим
+---------------------------+
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+---+---+---+---+---+---+---+
| A | B | C | D | E | F | G |
+---+---+---+---+---+---+---+
| A | B | C | D | E | F | G |
+---+---+---+---+---+---+---+
| A | B | C | D | E | F | G |
+---+---+---+---+---+---+---+
На экранах меньшего размера заголовки исчезают, столбцы 1 и 2, 3 и 4 переносятся, столбцы 5 и 6 скрываются, а столбец 7 остается
+---+---+---+
| A | C | G |
| B | D | |
+---+---+---+
| A | C | G |
| B | D | |
+---+---+---+
| A | C | G |
| B | D | |
+---+---+---+
У меня также есть JSFiddle, запущенный здесь ... JSFiddle