- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我正在为从后端服务器检索的数据创建一个表。我正在使用 Material UI 中的 Table
组件。从我检索的数据来看,它可能是空的或包含一个对象。我遇到的问题是,如果它是空的,我想显示 Table
组件中间没有日志供用户查看。但是,因为我在 TableHead
中定义了 TableCell
,单元格的数量被复制到 TableBody
中(我相信是这样),这是阻止我的消息居中。
这是我的组件:
export default function BasicTable() {
const classes = useStyles();
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows ? (
<div className={classes.noLogs}>
<p>No logs</p>
</div>
) : (
rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
);
}
完整代码可在 CodeSandbox 上获得.
如您所见,消息仅集中在 TableBody
的第一个单元格中。有没有一种方法可以仅在数据为空时删除这些单元格或通过其他方法将消息居中?
最佳答案
除了在 table
中使用 div
和 p
标签,您可以添加一个 TableRow
和一个表格单元格
。您可以将 colspan={5}
添加到您的 TableCell
以指示单元格扩展了多少列,如下所示:
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows ? (
<TableRow>
<TableCell colspan={5} align="center">
No items found
</TableCell>
</TableRow>
) : (
rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
关于javascript - 如何摆脱 TableBody 中的表格单元格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65726330/
因此,我正在为从后端服务器检索的数据创建一个表。我正在使用 Material UI 中的 Table 组件。从我检索的数据来看,它可能是空的或包含一个对象。我遇到的问题是,如果它是空的,我想显示 Ta
我有这个文件,它应该显示从数据库中提取的问题表。 该表确实显示,但所有问题数据都显示在ISSUE NUMBER 列下,而不是每个数据项都显示在其正确的列名称下。输出如下所示: 如何编辑此表以使所有数据
使用 Material UI,我希望表格的 TableBody 的最大高度为 500 像素。如果有任何行不能容纳在 TableBody 的高度内,那么 TableBody 应该垂直滚动,而 Table
我是一名优秀的程序员,十分优秀!