6

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.

Uciebila
  • 481
  • 2
  • 9
  • 27

3 Answers3

5

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}>
Senthil
  • 2,156
  • 1
  • 14
  • 19
  • This is just an example from the site I linked that does not have any customised column widths? – Uciebila Nov 21 '18 at 10:13
  • Please try now with the updated url https://codesandbox.io/s/xv9orx4zrw – Senthil Nov 21 '18 at 10:14
  • 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 – Uciebila Nov 21 '18 at 13:51
  • 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 – Uciebila Nov 21 '18 at 13:54
  • 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 – Uciebila Nov 21 '18 at 15:59
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

Uciebila
  • 481
  • 2
  • 9
  • 27
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

kirti aruja
  • 1
  • 1