材质用户界面v1-设置表格列的宽度 [英] Material UI v1 - set table column widths

问题描述

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

I want to set column widths on a Material UI table using css (not inside react using "classes"). But I don't understand how the column widths are controlled. I try to set widths on the TH columns but it doesn't work.

请参阅示例：
用户界面表格示例（请参见style.css）

See example: Material ui table example (See style.css)

我不知道表格列宽如何由Mui表上的 简单表控制：简单表格（您会看到第一列比其他列宽。如何？）

I don't understand how the table column widths are controlled on the "Simple Table" on the Mui table: Simple table (you can see that the first column is wider than the others. How?)

那么它如何工作，如何修改

So how does it work, and how can I modify the settings?

推荐答案

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

Try using colgroup, worked for me in 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>

这篇关于材质用户界面v1-设置表格列的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！