CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
kumbhani bhavesh
kumbhani bhavesh

Reputation: 2257

table design not in a single line

I used material-ui table now as you can see there is a header that has a break space in multiline from it I want it to a single line is there any way to do it in a single line? for more, I am sharing code you can edit the code and tell me how it can be possible using material UI or any other CSS. There is no issue if there is scroll enter image description here

Upvotes: 0

Views: 997

Answers (1)

deepakchethan
deepakchethan

Reputation: 5600

You can add the property white-space: 'nowrap' to both the table cell and header. Something like this:

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    whiteSpace: "nowrap"
  },
  body: {
    fontSize: 16,
    whiteSpace: "nowrap"
  }
}))(TableCell);

Working example: https://codesandbox.io/s/material-demo-forked-377jx?file=/demo.js

Upvotes: 2

Related Questions