8

I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.

I've tried manually setting the width in each cell like this:

<TableCell style={{ width: "10%" }}> Number </TableCell>

As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!

EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.

Improve this question

3 Answers 3

Reset to default
6

See here i have added a example for first column to have a custom width and wrap the content with custom CSS:

https://codesandbox.io/s/xv9orx4zrw

Add a constant value like the below and refer it in the column 

const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };

Then in TD refer like this 

<CustomTableCell style={customColumnStyle}>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This is just an example from the site I linked that does not have any customised column widths?
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
2

I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.

Setting Max Width can also be useful as it makes a fix width for all cells

Improve this answer

1 Comment

If you find it useful, then please mark it as correct answer.
0

I also had some issues, and finding a solution landed on this page but didn't work the given suggestions for me. so i have added any tag <div style={{width:300}}> <p style={{width:300}}> inside <Tablecell> like this and it worked.

<TableCell><p style={{width: 300}}>{row.address}</p></TableCell>

hope this works for others also

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.