Question

我正在尝试利用Material UI中的LOCAL_CERTIFICATE := platform LOCAL_PRIVILEGED_MODULE := true组件来构建数据表。但是，我正在努力为数据表创建等宽的列。目前，我正在尝试这样的事情：

Table

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

编辑：似乎<TableCell key={props.name} style={{width: '25%'}}> <span style={{ width: `${(100 / props.numCols)}%`, whiteSpace: "pre", overflow: "scroll", display: 'block' }} > {props.value} </span> </TableCell>属性实际上占用了文本长度的100％？有什么办法可以使它适应桌布的宽度吗？

Answer 1

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

{{1}}

Answer 2

设置均匀列宽的唯一方法似乎是利用tablehead和th来强制max-width / mix-width宽度。不幸的是，这两个属性都没有利用calc()函数。而且，不幸的是，普通的旧width不会影响行。您必须在px / em / rem中设置预定义的最大宽度和混合宽度。

更多坏消息……Material UI利用动态className，因此，如果您愿意，则不能覆盖其样式。

您必须执行以下操作之一：为每个组件{{ maxWidth: 300 }}设置内联样式，使用Material UI的Global CSS Override（请参见工作示例here），或仅更改整个元素范围为CSS。

阻力最小/项目混乱最少的路径是使用CSS和范围元素，方法是将它们包装在包含div的{{1}}或span中，例如：

className

这将翻译为：

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

但是，并非所有元素都可以包装，并且仍然需要某些属性为.container > table { ... }。

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

Table.js

!important

styles.css

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>
);

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

2 个答案: