CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Extelliqent
Extelliqent

Reputation: 1858

Material UI Table Cells Identical Fixed Width

I have a Material UI Table below. All of the table's columns are fit sized to 205px. Table itself set to be 100% width. So when I load the page if there is available space table do get bigger. The problem is if there is not enough space columns need to shrink based on the text inside them but they don't. They are stuck at 205px width.

enter image description here

I removed all paddings no help either. Text inside the each cell is an input field so if I make the input field width and all cells 60px the width went down to 191 but it's still giving each cell way bigger width than they need so columns are way larger than they should be. I changed width of the table, width of the container all no help.

enter image description here

I have pretty much exact table structure as in this example here; https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table

If you see table columns unnecessarily too large in this example too. What's causing columns to be way larger than what they need to be? Why they're all identical fixed to some size?

Upvotes: 0

Views: 6426

Answers (1)

vishnu sandhireddy
vishnu sandhireddy

Reputation: 1176

The input in the table cells have a default width and are making the columns to be not shrinkable, Changing width of input to 100% might make input to take parents width. https://codesandbox.io/s/optimistic-benz-ilnz2

Upvotes: 1

Related Questions