How can increase a width of the table row


I am using this project but i am not able to increase a width of this tree structure I am using " Vertical tree with root" I needed in a way that it’s fit to the screen . I try increasing a width But id doesn’t work .

Thank You

request unclear.

  1. You have no tables.
  2. What do you want to “fit the screen”? The divs already fit the screen as best-able.

Try adding,

body > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  box-sizing: border-box;


That’s not really built to be fluid as its always the last row that needs to stretch and it can’t really do that as it is nested in the element above. A lot of measurements are also in pixels which makes it even harder. A grid layout would probably have been better for a more fluid layout.

You can stretch the initial layout with the following code but if you add more rows then they will start to overflow the screen.

@media screen and (min-width: 800px) {
  body {
    margin: 0;
    padding: 0;
  body > div {
    flex: 1 0 0;
    margin: 1rem;

  .tree.vertical li {
    flex: 1 0 100%;

(It won’t be much use though if you are adding a lot of content instead of the node text that’s there at present.)

These tree structures can soon become complicated and unwildly and require masses of horizontal space. We had a question a while back that resulted in this demo.

Just for fun I had a go at coding my own version for a fluid width.

It’s a lot simpler than that other one but you soon run into space issues with a lot of nodes (as would any of them I guess). (The hardest part is adding the new nodes in the right place in the nested html.)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.