CSS - Nested rows in table [duplicate]

Question

I want to create a table exactly like this:

I don't have access to the website so I can't quite inspect the table.

Initially I tried with tables, it works with margin-left to move a little bit the sub-item, but a div inside a row does not take full height and I want to have a border-bottom exactly like in the image (which starts after the left margin) and could not manage to make it work

I also tried using div as trees, like so:

<div class="parent">
    <div class="parent">
    </div>
</div>

with style

.parent > .parent { margin-left: 25px; }

but I can't figure out how to create the right side of the table, because the next items after Name have to respect the table grid, which I do not know how to do it

There's also a hack to use classes like sub-item (margin: 20px), sub-item-2 (margin: 40px) but I consider it a hack so I would like not to use them, unless I have no choice

Do you have a snippet or any idea how to do this? I'm not asking for the whole code, I only need to know the idea behind this

I would consider this question as too broad... But to be as general as you are ;) your tree-approach is most likely to be succesful. Just read a tree structure css tutorial, or google some more for inspiration. That should point you to the right direction. — giorgio
– giorgio, Commented Nov 25, 2015 at 19:27
I don't think you understood me. I do know how to create a tree, it's easy nesting divs, I need a table tree, which is different. You don't nest rows in rows — Rares Mardare
– Rares Mardare, Commented Nov 25, 2015 at 19:28
Why wouldn't you nest rows in rows? or nest a row-container in a row? — giorgio
– giorgio, Commented Nov 25, 2015 at 19:34

RaminS · Accepted Answer · 2015-11-25 19:34:44Z

0

Keeping everything in a table and using ul instead of divshould work I think. With a bit of JavaScript simply insertRow() and deleteRow() when the list is shown/hidden.

answered Nov 25, 2015 at 19:34

RaminS

2,2594 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS - Nested rows in table [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related