我想使用css(而不是在react內使用& quot類別& quot). 但是我不明白列寬是怎么控制的。我試著設置第10列的寬度，但是不起作用.

參見示例: 材質ui表示例(參見style.css)

我不明白在& quot簡單表格& quot在材質UI表上:簡單表(你可以看到第一列比其他列寬。怎么會？)

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

試著使用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>

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

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

使用百分比設置寬度就可以了。

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

對我有效的解決方案是使用tableLayout:“固定”以及固定的列像素值寬度。

colgroup選項不起作用。

要給每一列提供寬度，colspan是比固定寬度更好的解決方案，它將使表格根據屏幕/網格大小做出響應。例如，您可以將colSpan={4}放在列組件上。 并在colspan table-layout中固定列寬:固定樣式會有所幫助。 因此，該表可以響應，但列的寬度是固定的。

我的解決方案是用Box組件包裝TableCell內容并設置盒子的樣式，來自我的github評論:https://github . com/mui-org/material-ui/issues/1911 # issue comment-759935300

...
const useStyles = makeStyles((theme: Theme) => createStyles({
  ...
  longTextStyle: {
    wordWrap: 'break-word',
    maxWidth: 1000,
  },
  ...
}));
...
<TableCell>
  <Box className={classes.longTextStyle}>
    {longText}
  </Box>
</TableCell>
...

這似乎比我的第一個假設更困難，因為它沒有根據表組件的基礎產生某種多米諾骨牌效應，但是我確實發現這個討論中有許多人希望用許多不同的方法做同樣的事情。我會在那里排序，看看什么最適合你的特定用例(沒有看到你的代碼，我不知道什么是最安全的建議)。

同樣，如果我們在桌子上檢查你給出的例子，我們可以得到一個體面的想法(乍一看有點混亂)他們是如何做到這一點的。

我會盲目地推薦像& lttable fixed header = { false } style = { { width:" auto "，table layout:" auto " } } & gt；允許您的表格根據內容動態調整大小，而不是保持相同的大小。

希望這至少能幫助你找到正確的方向！如果沒有，請告訴我。