英文:
MUI How to make a child dropdown stretch to fill a table-cell parent element
问题
我有一个具有table-cell显示的父元素，以及一个子下拉元素，我希望它能够拉伸以填充父元素内的可用空间。我尝试将子元素的宽度设置为100%，或者尝试调整显示/定位，但它并没有填充整个空间。
这是我尝试做的一个示例：
https://codesandbox.io/s/serene-hermann-b61vwr?file=/src/App.js
如你所见，下拉框的大小与表格单元格不一样，看起来很奇怪，我该如何修复它？
英文:
I have a parent element with a display of table-cell, and a child dropdown element that I want to stretch to fill the available space within the parent element. I've tried setting the child element's width to 100%, or playing with the display/positioning but it's not filling the entire space.
Here's a sandbox of what I'm trying to do:
https://codesandbox.io/s/serene-hermann-b61vwr?file=/src/App.js
as you can see the dropdown size is not the same as the table cell and it looks weird, how can I fix it?
答案1
得分: 1
这是关于表头单元格存在填充(padding)的问题，这与你的下拉菜单效果不太兼容。你需要对包含下拉菜单的表格单元格标题应用不同的样式。
使用你的代码可能会找到更加优雅的解决方案，但这应该可以帮助你入门。现在下拉菜单将占据其单元格的整个宽度。这里有一个示例：
从 StyledTableCell 克隆：
const StyledTableDropdownCell = styled(TableCell)(({ theme }) => ({
`&.${tableCellClasses.head}`: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
borderBottom: 0,
border: "1px solid black",
align: "center",
padding: 0 // <--- 不再有表头单元格的填充
},
`&.${tableCellClasses.body}`: {
fontSize: 14
}
}));
table.js
<StyledTableRow>
{tableHeadData.map(({ label, align, rowSpan, colSpan }, index) => {
console.log({ label, index });
if ([0,1].includes(index)) { // <--- 这部分可以更好地完成
return (
<StyledTableDropdownCell
key={index}
align={align}
rowSpan={rowSpan}
colSpan={colSpan}
>
{label}
</StyledTableDropdownCell>
);
}
return (
<StyledTableCell
key={index}
align={align}
rowSpan={rowSpan}
colSpan={colSpan}
>
{label}
</StyledTableCell>
);
})}
</StyledTableRow>
英文:
The issue is the table header cells have padding which doesn't work well with your dropdowns. You essentially need to apply a different style to the table cell headers that contain dropdowns.
You may find a more elegant solution with your code but this should help you get started. Now the dropdowns will take the full-width of their cells. Here's an example:
Cloned from StyledTableCell:
const StyledTableDropdownCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
borderBottom: 0,
border: "1px solid black",
align: "center",
padding: 0 // <--- No more table header cell padding
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14
}
}));
table.js
<StyledTableRow>
{tableHeadData.map(({ label, align, rowSpan, colSpan }, index) => {
console.log({ label, index });
if ([0,1].includes(index)) { // <--- this could be done better
return (
<StyledTableDropdownCell
key={index}
align={align}
rowSpan={rowSpan}
colSpan={colSpan}
>
{label}
</StyledTableDropdownCell>
);
}
return (
<StyledTableCell
key={index}
align={align}
rowSpan={rowSpan}
colSpan={colSpan}
>
{label}
</StyledTableCell>
);
})}
</StyledTableRow>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论