css, nested, first column indented, collapsible, table - html

Question

Straight to the point, Can you make something like this in pure css
This is a table with four columns, where:
certain rows can be collapsed (~ <details>)
the first column only is indented
some columns have a dynamic width ( ~ flex-grow , grid: 1fr )
some control over the dynamic width
the underlying html structure would look something like
<entry>
<A> example </A>
<B> example </B>
<C> example </C>
<D> example </D>
<sub-entries>
...
</sub-entries>
</entry>
using just css grids and <details> I can get requirements 1,3 and 4, but not 2.
As a side node, for my specific case the html structure can be generated from code.
EDIT
Example of requirements 1,3,4: https://codepen.io/samcoutteauhybrid/pen/XWYpEZe
the point isn't to make this example work, rather a way to display some data in a table ( not necessarily <table> ). So the starting point would be some json-esc object which needs to be converted to html.

Answer 1

using custom CSS property for depth was the right approach. here's how you could implement it
in your pen make this change to your CSS
.sub-entries {
padding-left: calc(1em * var(--depth,1));
}
here var() resolves to 1 if --depth is not defined. you may want to use 0 instead. that way there is no default indentation for subentries
to set the indent, the markup has to be updated to
<div class="sub-entries" style="--depth: 1">
<div class="entry">
<div class="name">indent me</div>
<div class="type">don't indent me</div>
<div class="sub-entries" style="--depth: 2">
<div class="entry">
<div class="name">indent me further</div>
</div>
</div>
</div>
</div>
PS: turns out cannot be done with <table> because only <tr> <th> <td> are valid children and the parser disposes everything else