3

I'm using Reactabular to create a dynamic table. I've looked everywhere in the source code but couldn't find the CSS file which is responsible for controlling the height and width of the columns. Can anyone please help me?

This is the Reactabular repo: https://github.com/bebraw/reactabular

And this is the demo: https://bebraw.github.io/reactabular/ (Is there a way to find the name of the CSS file which is responsible for column width and height through "inspect element"?)

Juho Vepsäläinen
  • 26,573
  • 12
  • 79
  • 105
90abyss
  • 7,037
  • 19
  • 63
  • 94

1 Answers1

0

The code below is based on the demo page, suppose you need to change the width of the position column, you can do that using nth-child.

.pure-table td:nth-child(2) { width: 150px; }

Generally you will use the above custom CSS in a file that is loaded after the reactabular CSS file.

Output:

enter image description here

m4n0
  • 29,823
  • 27
  • 76
  • 89
  • It doen't work, if you type in a new row a big amount of characteres the cell expand. – Yuri Pereira Jan 23 '17 at 07:47
  • 1
    Yuri, CSS fixes are basically just a hack. For a standard way, check out the examples: https://reactabular.js.org/#/examples/expand-column-to-fit and https://reactabular.js.org/#/examples/fixed-width-columns. – m4n0 Jan 23 '17 at 08:52