css - Material UI v1 - 设置表格列宽

Question

我想使用 css 在 Material UI 表上设置列宽(而不是在内部使用“类”进行 react )。但是我不明白列宽是如何控制的。我尝试在 TH 列上设置宽度，但它不起作用。

看例子: Material ui table example (参见 style.css)

我不明白如何在 Mui 表的“简单表”上控制表列宽:Simple table (您可以看到第一列比其他列宽。如何？)

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

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>