如何将大列分解成较小的列

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

经过很长时间的思考，我终于找到了这个表没有分成多行的原因。

这是因为行本身是单个表体的一部分，并且< tbody >不能使用普通的css (除非我使用javascript强制使用)。

因此，为了使表行滑到新列，我必须做一个完整的更改--即将整个< table >元素替换为multiples < div >结构。

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