Question

我想使用CSS在Material UI表上设置列宽（而不是在内部使用“类”做出反应）。但是我不明白如何控制列宽。我尝试在TH列上设置宽度，但这不起作用。

请参阅示例： Material ui table example（请参阅style.css）

我不了解如何在Mui表格上的“ 简单表格”上控制表格列的宽度：Simple table（您可以看到第一列的宽度比其他人。如何？）

那么它如何工作，如何修改设置？

Answer 1

尝试使用在Material-UI V1中为我工作的colgroup

<Table>
   <colgroup>
      <col style={{width:'10%'}}/>
      <col style={{width:'20%'}}/>
      <col style={{width:'70%'}}/>
   </colgroup>
   <TableHead>
      <TableRow>
         <TableCell>Head1</TableCell>
         <TableCell>Head2</TableCell>
         <TableCell>Head3</TableCell>
      </TableRow>
   </TableHead>
   <TableBody>
      <TableRow>
         <TableCell>Data1</TableCell>
         <TableCell>Data2</TableCell>
         <TableCell>Data3</TableCell>
      </TableRow>
   </TableBody>
</Table>

Answer 2

我在以下方面取得了成功：

<Table>
<colgroup>
    <col width="10%" />
    <col width="10%" />
    <col width="60%" />
    <col width="10%" />
    <col width="10%" />
</colgroup>
<TableHead>....
    ... yada yada...
</Table>

或者，更具体地说，给定宽度数组colWidths：

<Table key={this.props.key + "_table"} className={classes.table}>
    <colgroup>
        {this.props.colWidths.map((colWidth, i) => <col key={"colWidth_"+i} width={colWidth}/>)}
    </colgroup>
    <TableHead>
        <TableRow>
            {tableHeaders}
        </TableRow>
    </TableHead>
    <TableBody>
        {tableRows}
    </TableBody>
</Table>

Answer 3

如果不根据表组件的创建方式来创建一种多米诺骨牌效应，这似乎比我的第一个假设要难一些，但是I did find this discussion希望通过许多不同的方法来完成相同的事情。我会在那儿进行排序，然后看看哪种方法最适合您的特定用例（没有看到您的代码，我不知道推荐哪种方法最安全）。

同样，如果我们在桌子上检查一下，您举了一个例子，我们可以得到一个不错的想法（乍一看有点令人困惑），他们是如何做到这一点的。

我会盲目推荐<Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}>之类的东西，以允许您根据内容动态调整表的大小，而不是保持相等的大小。

希望这至少可以帮助您指出正确的方向！如果没有请让我知道。

Answer 4

最适合我的解决方案是使用tableLayout: 'fixed'以及各列的固定像素值宽度。

colgroup选项不起作用。

Answer 5

要赋予每一列宽度，colspan是比固定宽度更好的解决方案，它将使表响应于屏幕/网格大小。因此，您可以将colSpan={4}例如放在列组件上。并在colspan table-layout: fixed样式内固定列宽会有所帮助。因此，该表将具有响应性，但列的宽度固定。

Answer 6

使用百分比设置宽度效果很好。

            <TableHead>
              <TableRow>
                {columns.map((column) => (
                  <TableCell
                    key={column.id}
                    align={column.align}
                    width="10%"
                  >
                    {column.label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>

Answer 7

我的解决方案是用 Box 组件包装 TableCell 内容并设置 Box 的样式，来自我的 github 评论：https://github.com/mui-org/material-ui/issues/1911#issuecomment-759935300

df
    .withColumn("test", regexp_replace($"test_count", "_count$", ""))
    .withColumn("test1", regexp_replace($"test1_count", "_count$", ""))
    .withColumn("test_", regexp_replace($"test_count", "count$", ""))
    .withColumn("test1_", regexp_replace($"test1_count", "count$", ""))
    .show
+----------+-----------+----+-----+-----+------+
|test_count|test1_count|test|test1|test_|test1_|
+----------+-----------+----+-----+-----+------+
|test_count| TEST_count|test| TEST|test_| TEST_|
+----------+-----------+----+-----+-----+------+

材质用户界面v1-设置表格列的宽度

7 个答案: