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

任何建议都将受到欢迎。谢谢：）

Answer 1

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

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

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

元素替换为倍数 < div> 结构。

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

如何将大列分成较小的列

1 个答案: