javascript - How to set smallest width on table column in Material-UI? - Stack Overflow

admin管理员组

文章数量:1431927

I'm building a website in React, using Material-UI. I have a table and was wondering, if it's possible to set column width to fit the data + some additional padding on both ends?

This is my table:

  <Table className={classes.table} size="small">
    <TableHead>
      <TableRow>
        <TableCell width="???">CA</TableCell> <--- Width should be as much as "Fit to data" + margin of X pixels
        <TableCell width="140px">CB</TableCell>
        <TableCell width="240px">CC</TableCell>
        <TableCell width="200px">CD</TableCell>
        <TableCell>CE</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map((row) => (
        <TableRow key={row.id}>
          <TableCell>{row.ca}</TableCell>
          <TableCell>{row.cb}</TableCell>
          <TableCell>{row}</TableCell>
          <TableCell>{row.cd}</TableCell>
          <TableCell>{row.ce}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>

I'd like column CA to be minimal, just so it fits the data with additional space on both sides, so that content doesn't touch column borders.

I've tried:

1. not declaring width at all - didn't work
2. width="auto" - didn't work

I'm building a website in React, using Material-UI. I have a table and was wondering, if it's possible to set column width to fit the data + some additional padding on both ends?

This is my table:

  <Table className={classes.table} size="small">
    <TableHead>
      <TableRow>
        <TableCell width="???">CA</TableCell> <--- Width should be as much as "Fit to data" + margin of X pixels
        <TableCell width="140px">CB</TableCell>
        <TableCell width="240px">CC</TableCell>
        <TableCell width="200px">CD</TableCell>
        <TableCell>CE</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map((row) => (
        <TableRow key={row.id}>
          <TableCell>{row.ca}</TableCell>
          <TableCell>{row.cb}</TableCell>
          <TableCell>{row}</TableCell>
          <TableCell>{row.cd}</TableCell>
          <TableCell>{row.ce}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>

I'd like column CA to be minimal, just so it fits the data with additional space on both sides, so that content doesn't touch column borders.

I've tried:

1. not declaring width at all - didn't work
2. width="auto" - didn't work

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Jul 24, 2020 at 19:41 Adam Wojnar asked Jul 24, 2020 at 19:19 Adam WojnarAdam Wojnar 54511 gold badge88 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can target this th with css and set it to width: 1px; white-space: nowrap;

I think this should work in your case:

.MuiTableCell-head:first-child {
   width: 1px;
   white-space: nowrap;
}

And here's how this can be achieved using react inline-styling:

// You can also add padding or any other style props to this style object 

<TableCell style={{width: '1px', whiteSpace: 'nowrap'}}>CA</TableCell>

本文标签： javascriptHow to set smallest width on table column in MaterialUIStack Overflow