我有一个包含多个不同大小的表格的 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 规则。 关于html - 如何将大列分成较小的列，我们在Stack Overflow上找到一个类似的问题：
https://stackoverflow.com/questions/54203788/
相关文章：
javascript - 当我们动态更改 css 文件时，如何避免无样式的内容闪烁？
c# - 执行阅读器 : CommandText property has not been initialized when using gridView
html - 在没有javascript的情况下使表格单元格内的div具有相同的高度
javascript - 在 Firefox Webextension Contentscript 中使用 fontawesome
html - 文本在 Safari 中的位置与在其他浏览器中的位置不同
替换整个
元素div > 结构。