reactjs - Reactjs中表格组件行之间的间距
问题描述
我正在尝试在表格组件的每一行之间创建空间。我在 TableRow、TableCell、TableBody 和 Table 上使用了 classname 和 classes 道具,但没有任何效果。我也尝试创建自定义主题,但它也不起作用。这是代码,
const useStyles = makeStyles({
table: {
minWidth: 650
},
tableRow: {
cursor: "pointer",
borderLeft: "8px solid #9a031e",
marginTop: "8px"
},
tableCell: {
marginTop: "8px"
}
});
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
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 component={Paper}>
{rows.map((row) => (
<TableRow
key={row.name}
className={classes.tableRow}
styles={{ marginTop: 8 }}
>
<TableCell component="th" scope="row" style={{ width: 100 }}>
{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>
);
}
请让我做错了什么?我怎样才能实现它?
解决方案
您可以在表格样式中使用边框折叠和边框间距。就这样。
table: {
minWidth: 650,
borderCollapse: 'separate',
borderSpacing: '0px 4px'
}
要了解更多信息,请参阅:Cannot put margin on <td> tag with both CSS and cellspacing attribute
推荐阅读
- php - 将 POST 回显到 SQL 字符串中
- sql - Eagerload has_one 与具有多个相关值的表的关联
- java - 如何使用流比较字符串字符?
- scala - 使用scala在火花结构化流中将排序的数据帧写入kafka主题(排序的顺序行)
- javascript - 如何在运行下一个代码之前等待异步 JSZip .forEach() 调用完成?
- node.js - 无法使用 mongoose 在 mongodb 中插入散列(bcrypt)密码
- firebase - 将 Firebase Firestore 安全规则拆分为单独的文件?
- docker - 在 Azure Web App for Containers 中无法访问 RabbitMQ 容器
- c++ - 使用稀疏表的范围最大和查询
- swift - 使用查询游标从 Firestore 填充 UITableView(分页)