html5 - 如何将大列分成较小的列

我有一个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)'，但是该表重叠在第二行的另一个表上。

衷心欢迎任何建议。谢谢：）

最佳答案

经过漫长的思考，我终于找到了导致表格无法分解为多行的原因。

这是因为行本身是单个表主体的一部分，并且不能使用普通的CSS自行中断（除非我使用JavaScript强制使用）。

因此，为了使表行滑到新的列上，我必须进行完整的更改-即通过用倍数

结构替换整个元素。

这样，我每一行都是独立的元素，可以更有效地遵循css规则。

关于html5 - 如何将大列分成较小的列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54203788/

10-13 01:40