Я пытаюсь создать интерактивную доступную таблицу с несколькими заголовками, используя CSS Flexbox. Я использую TypeScript и React, но проблема основана на HTML и CSS. Цель состоит в том, чтобы иметь заголовок столбца для «Атака» и вторую строку под ним для каждого типа покемонов. Точно так же заголовок «Защита» и каждый тип покемона для каждой строки. Каждая ячейка должна иметь множитель урона, применяемый между этими двумя типами, и быть расширяемой, чтобы предоставить мнемоник c, который поможет людям запомнить, какие типы имеют преимущество. IE Electri c Pokemon имеет преимущество перед Flying Pokemon, потому что "закрылки получают взрывы". Вот идея:
The issue is that when using Flex to handle table responsiveness and expansion of the cells, I cannot orient the "Defending" header to visually or programatically match the expected rowspan. The "Defending" header only applies to the first row, not all of the rows.
Here is the codesandbox: https://codesandbox.io/s/pokemon-type-matchups-2lceh
Теоретически я хочу создать элемент, содержащий тело таблицы, и установить для него значение flex:column , с двумя столбцами, представляющими таблицу («Защита» и все строки с их заголовками). Но при использовании <tbody> со значением flex:column и использовании th в качестве дочернего элемента возникает ошибка:
validateDOMNesting(...): <th> cannot appear as a child of <tbody>.
Здесь codeandbox для tbody в виде двух столбцов
Без CSS, таблица работает должным образом, за исключением, конечно, скорости отклика и изменения размера ячеек.
Могу ли я использовать Flexbox для создания этой таблицы с несколькими заголовками? Chrome 80 больше не удаляет информацию о доступности в таблицах при изменении свойства отображения, поэтому я пытаюсь придерживаться собственных элементов таблицы.
Я использовал приведенный ниже пример multi- таблицы заголовков в качестве руководства: