如何为具有资料用户界面v5的表列设置最大宽度

Question

我正试图为作为材料表列一部分的单元格设置最大宽度，就像使用Fluent UI的表一样。

表需要有width: 100%，单元格需要小于最大宽度。

在将最大宽度设置为单元格及其子单元后，单元格的宽度仍然大于所设置的极限，尽管比其他条件下的宽度要小。

然而，我确实设法设置了一个固定的宽度，尽管由于某种原因，边框似乎无法使用它。

是否有一种方法可以在不限制表大小或设置固定宽度的情况下将最大宽度设置为列？

演示

相关章节：

const width = 100;
const style = {
  maxWidth: width,
  borderStyle: "border-box"
};

// inside head row
<TableCell align="right" sx={style}>
  <div style={style}>Protein (g)</div>
</TableCell>

// inside table row loop
<TableCell align="right" sx={style}>
  <div style={style}>{row.protein}</div>
</TableCell>

Answer 1

我希望我正确地理解了你的问题。默认情况下，MUI TableCell显示所有单元格内容。您可以避免单元格内容溢出，可以将其更改为{宽度: 100，最大宽度: 100，溢出：“隐藏”，textOverflow：“省略”}。要了解更多关于TableCell 表格单元格最大宽度#2802不能工作的最大宽度的信息。

import { styled } from "@mui/material/styles";
import MuiTableCell from "@mui/material/TableCell";

// set the entire last column with Mui 5 Styled-Component
const TableCell = styled(MuiTableCell)`
  :last-of-type {
    width: 100;
    max-width: 100;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;

OR

// set each cell
const style = {
  width: 100,
  maxWidth: 100,
  overflow: "hidden",
  textOverflow: "ellipsis",
  borderStyle: "border-box"
};