When it comes to TreeView or hierarchical data, the usual approach is to gather them dynamically. In my case, I generate the data using PHP on the server-side from a database or filesystem. I required a more structured solution that would allow me to manipulate the data using JavaScript on the client-side.
For me, utilizing a table with colspan for variable indent was the way to go. To handle similar cells consistently (by applying the same class attribute), I used to include the same number of TD elements in every TR, marking the unused ones as display:none. This enabled me to maintain uniformity and facilitate formatting with methods like nth-child(..).
The missing elements include item-IDs per TR to establish links to the database for management purposes, as well as the incorporation of JavaScript functionalities.
In this example, different colors are assigned to aid in identifying placement errors during testing.
Here's a screenshot from FireFox Mint 104 for reference
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="webdev (at) kgsw (dot) de">
<meta name="description" content="2022-09-01/kg: Example hierarchical view (tree view)">
<meta name="keywords" content="html, html5, css, tree view, table">
<style>
body {
font-family: sans-serif;
}
table {
border-collapse:collapse;
cursor:default; }
td,th {
font-size:12px;
border:1px solid lightblue; /* transparent; */
line-height: normal;
padding: 0;
}
td { display:none; }
td.symbol, td.line, td.indent { display:table-cell; }
td.line { color:blue; }
td.symbol { color:green; }
td.indent { color:grey;font-size:8px; }
td:nth-child(12) { display:table-cell; width:70%; } /* items */
td:nth-child(13) { display:table-cell; min-width:80px; } /* remarks */
td:hover { background-color:#dec; }
td.line:hover { background-color:transparent; }
td.symbol:hover { color:red; }
</style></head><body>
<table>
<tr>
<td class="indent"> #</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="11"> <small>ROOT</small></td><td> :remarks</td>
</tr><tr>
<td class="indent"> 1</td><td class="line">├ </td><td class="symbol">▢</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item1</td><td> </td>
</tr><tr>
<td class="indent"> 2</td><td class="line">│ </td><td class="line">├ </td><td class="symbol">▢ </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="8"> Item1.1</td><td> </td>
</tr><tr>
<td class="indent"> 3</td><td class="line">│ </td><td class="line">└ </td><td class="symbol">▢ </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="8"> Item1.2</td><td> </td>
</tr><tr>
<td class="indent"> 4</td><td class="line">├ </td><td class="symbol">▢</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item2</td><td> </td>
</tr><tr>
<td class="indent"> 5</td><td class="line">├ </td><td class="symbol">▢</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item3</td><td> </td>
</tr><tr>
<td class="indent"> 6</td><td class="line">└ </td><td class="symbol">▢</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td colspan="9"> Item4</td><td> </td>
</tr><tr>
</tr>
</table>
<hr>
<cite><p>By changing the general class (display) to 'skip' and defining only the utilized TDs as 'table-cell', improvements were made.</p>
</cite>
</body></html>