Adding table columns to a pure CSS Tree View

What's the issue? I have the following codepen: which uses this great <details>-<summary> trick to turn an ul into a tree view where you toggle items to hide/display them. I would like to introduce 2 more columns to this Tree View, i.e., the resulting table will have the expandable li and the second and third columns will have some value that should be aligned (and only show up if its respective li counterpart is toggled open ). To make simple to explain, I have attached a GIF explaining the approach. I have also attached an example picture which describes this table with tree view and the extra 2 columns I want to introduce. What did you already try? I tried to wrap the tree (found in the codepen) in a <table> and add two columns, but this introduces all sorts of incompatibilities. So I just used turned li into a long flex box, and have two column be at the very right hand side of the flexbox to mimick a (fake) table, which is not ideal 😦 See the second GIF of my attempt at making this tree view into a table. Here is my current implementation as a codepen: EDIT: FollowAndrew on YouTube did a video on this exact tree view implementation I would really appreciate if you could help me! Thank you!
Pure CSS tree view with custom tree icons
In this tutorial we'll be creating a pure CSS solution to implement a tree view structure. This is a very common structure and typically requires javascript in order to fully complete. In this CSS only solution we'll have customizable tree icons, use pseudo elements for the 'tier' legs and arms along with several tricks along the way! πŸ’– SUBSC...
No description
No description
No description
2 Replies
clevermissfoxβ€’4w ago
would try using grid instead of table or flex
MarkBootsβ€’4w ago
yea because of a lot of nesting, it's really hard to get the structure lined up. I did try a couple of things, but it gets messy really fast. A pure css solution (imo) is nearly impossible a table and js would be easier