Menu
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.
See example: Material ui table example (See style.css)
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?
329
To give width to each column, colspan is better solution than fixing the width, it will make table responsive depending on screen/grid size. So you can put colSpan={4} for example on column components. And to fix column width within the colspan table-layout: fixed style will help.
As shown in the previous section, simply use the style or classes prop on the TableCell to set the width, i.e. style={{ width: "25%" }} .
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
