Как разбить большие столбцы на меньшие столбцы

Question

У меня есть div, который содержит несколько таблиц различного размера (данные таблиц поступают из бэкэнда).

Проблема, которую я пытаюсь решить, состоит в том, чтобы разбить большую таблицу (функция 1 на изображении) на меньшие, чтобы они все поместились в один ряд фиксированного размера.

Другой вариант заключался в том, чтобы другие таблицы (функция 2-5) располагались друг над другом (предпочитая первую).

const container = css({ // main container
  boxSizing: 'border-box',
  margin: '40px auto',
  width: '90%'
});

const partName = css({  // header containing text 'Part A'
  fontSize: '1.2rem',
  fontWeight: 'bold',
  padding: '0.5rem'
});

const tablesContainer = css({ // Div containing all feature tables
  display: 'grid',
  gridGap: '0.25rem',
  gridTemplateRows: 'minmax(15rem, auto)',
  gridTemplateColumns: 'repeat(auto-fill, minmax(13rem, max-content))',
  gridAutoFlow: 'row',
  alignItems: 'baseline'
});

const featureTable = css({ // single feature table
  display: 'grid'
});

const featureName = css({ // feature header with bg color
  color: '#fff'
});

const featureRows = css({ // feature table cells
  '& th, td': {
    padding: '0.5rem',
  }
});

Я пробовал gridTemplateRows: 'minmax(15rem, 30rem)', но таблица перекрывается с другой таблицей во 2-й строке.

Любые предложения приветствуются. Спасибо:)

Answer 1

После долгих раздумий я наконец нашел причину, по которой таблица не разбивается на несколько строк.

Это потому, что сами строки являются частью одного тела таблицы и не может разбиться сам по себе с помощью простого CSS (если я не форсирую его с помощью JavaScript).

Итак, чтобы строки таблицы переместились на новые столбцы, я должен сделать полное изменение, то есть заменить весь элемент на кратные структура.

Таким образом, все строки являются независимыми элементами и более эффективно подчиняются правилам css.