MaterialUI 表 - 使用跨度的等宽列？

Question

我正在尝试利用TableMaterial UI 中的组件来构建数据表。但是，我正在努力为我的数据表制作等宽的列。目前我正在尝试这样的事情：

<TableCell key={props.name} style={{width: '25%'}}>
          <span
            style={{
              width: `${(100 / props.numCols)}%`,
              whiteSpace: "pre",
              overflow: "scroll",
              display: 'block'
            }}
          >
            {props.value}
          </span>
 </TableCell>

然而，这似乎并不能解决问题。我希望有 4 列等宽，但在这张照片中，您会看到只能看到 3 列（第 4 列在屏幕外），值得注意的是，第 3 列非常长。我将不胜感激任何指针！

编辑：似乎该width属性实际上占用了文本长度的 100%？有没有办法让它占据桌子的宽度？

Answer 1

我知道这个问题有点过时了，但是您可以执行以下操作来更好地控制表格行宽分布：

<Table style={{ tableLayout: 'fixed' }} > .. </Table>

Answer 2

似乎设置均匀列宽的唯一方法是通过利用和来强制tablehead/宽度。不幸的是，这两个属性都没有使用该功能。而且，不幸的是，普通旧不会影响行。您必须在 // 中设置预定义的 max-width 和 mix - width 。thmax-widthmix-widthcalc()widthpxemrem

更坏的消息是……Material UI 使用动态className，因此如果您愿意，您无法覆盖它们的样式。

您被迫：为每个组件设置内联样式{{ maxWidth: 300 }}，使用 Material UI 的全局 CSS 覆盖（请参阅此处的工作示例），或者只是使用 scoped 更改整个元素CSS。

最小阻力/更少项目混乱的路径是使用 CSS 和范围元素，将它们包装在 containsdiv或spana中className，例如：

<div className="container">
  <table>
    ...
  <table>
<div>

这将翻译为：

.container > table { ... }

然而，并不是所有的元素都可以被包装，并且它仍然需要一些属性!important。

工作示例： https: //codesandbox.io/s/6nwpkylw33

表.js

import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import rows from "./rowsData";

export default () => (
  <div>
    <h1 className="title">Material UI - Responsive Table</h1>
    <Paper className="container">
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(({ id, name, calories, fat, carbs, protein }) => (
            <TableRow key={id}>
              <TableCell component="th" scope="row">
                {name}
              </TableCell>
              <TableCell numeric>{calories}</TableCell>
              <TableCell numeric>{fat}</TableCell>
              <TableCell numeric>{carbs}</TableCell>
              <TableCell numeric>{protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  </div>
);

样式.css

.container {
  overflow-x: auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  padding: 10px;
  margin: 10px;
}

.title {
  margin-top: 20px;
  text-align: center;
}

tr {
  height: 40px !important;
}

th {
  max-width: 125px;
  min-width: 125px;
  padding: 0 !important;
  overflow-x: auto;
  white-space: nowrap; /* <== comment/remove this if you want long strings to alter row heights */
  text-align: center !important;
}

td {
  height: 40px !important;
  padding: 5px !important;
  text-align: center !important;
}