Material UI v1 - 设置表格列宽

Question

我想使用css在Material UI表上设置列宽(不是使用"classes"进行反应).但我不明白如何控制列宽.我尝试在TH列上设置宽度,但它不起作用.

参见示例: Material ui table示例 (请参阅style.css)

我不明白如何在Mui表的" 简单表 "上控制表列宽度:简单表(您可以看到第一列比其他列宽.如何？)

那么它是如何工作的,我该如何修改设置呢？

Answer 1

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

<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

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

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

Answer 4

这似乎比我的第一个假设更困难，因为没有根据表格组件的基础产生某种多米诺骨牌效应，但是我确实发现这个讨论有很多人希望用许多不同的方法做同样的事情。我会在那里进行排序，看看什么最适合您的特定用例（没有看到您的代码，我不知道推荐什么是最安全的）。

同样，如果我们检查您提供的表格，我们可以得到一个不错的想法（乍一看有点令人困惑）他们是如何实现这一目标的。

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

希望这至少可以帮助您指明正确的方向！如果没有，请告诉我。