list data in tabular layout - html

Question

I want my data to have an html that is rendered something like (imagine the headers are aligned above the values)
header1 header2 header3
List item 1
value111 value112 value113
value121 valueb122 valueb123
List item 2
value211 value212 value213
value221 valueb222 valueb223
I want the values to be part of the list block, so I can show/hide the content (collapse) on click. Further, I want the width of each 'column' to be dynamically decided, to accommodate the longest value (perhaps with a min width)

Answer 1

Unfortunately, the HTML table model is so simple that it does not let you enter headers for row groups, which seems to be what the list items would need to be, more or less. We need to fake a little: we form row groups with the tbody element and use the first row in a group as a group header. That row will contain the header in one cell that spans all columns.
The following example has minimal styling and one (rather clumsy) way of making the row group headers controls that can be used so switch off and on the display of data rows in the group. This is just a demonstration to show that such things are doable without mixing list markup with table markup (and, for that matter, without using list markup at all).
function toggleData(el) {
el.parentNode.parentNode.className =
el.parentNode.parentNode.className ? '' : 'hide';
}
tbody > tr:first-child > td:before {
content: '\2022';
padding-right: 0.25em;
}
tbody.hide > tr:not(:first-child) {
display: none;
}
<table border cellspacing=0>
<thead>
<tr><th>header1 <th>header2 <th>header3
</thead>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 1
<tr><td>value111 <td>value112 <td>value113
<tr><td>value121 <td>valueb122 <td>valueb123
</tbody>
<tbody>
<tr><td colspan=3 onclick="toggleData(this)">List item 2
<tr><td>value211 <td>value212 <td>value213
<tr><td>value221 <td>valueb222 <td>valueb223
</tbody>
</tabe>