表格设计不在一行

【问题标题】：table design not in a single line表格设计不在一行
【发布时间】：2021-09-18 03:51:58
【问题描述】：

我现在使用material-ui table，你可以看到有一个在多行中有一个分隔空间的标题我想要它到单行有没有办法在单行中做到这一点？更多信息，我正在分享code，您可以编辑代码并告诉我如何使用材质 UI 或任何其他 CSS 来实现。如果有滚动就没有问题

【问题讨论】：

澄清一下，您希望第一列足够宽以使其标题全部位于一行？
是的，我希望所有列在一个宽的单行中

标签： html css reactjs material-ui

【解决方案1】：

您可以将属性white-space: 'nowrap' 添加到表格单元格和标题中。像这样的：

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    whiteSpace: "nowrap"
  },
  body: {
    fontSize: 16,
    whiteSpace: "nowrap"
  }
}))(TableCell);

工作示例：https://codesandbox.io/s/material-demo-forked-377jx?file=/demo.js

【讨论】：