0

I want to create a table exactly like this:

The table I'm modeling

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

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Rares Mardare
  • 193
  • 1
  • 4
  • 13
  • Your link doesn't work. – Anna Nov 25 '15 at 19:24
  • It works for me. I changed the link, try now please – Rares Mardare Nov 25 '15 at 19:26
  • 1
    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](http://www.thecssninja.com/css/css-tree-menu), or [google some more](https://www.google.com/search?q=css+tree+structure) for inspiration. That should point you to the right direction. – giorgio Nov 25 '15 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 Nov 25 '15 at 19:28
  • Why wouldn't you nest rows in rows? or nest a row-container in a row? – giorgio Nov 25 '15 at 19:34

1 Answers1

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.

RaminS
  • 2,208
  • 4
  • 22
  • 30