I am displaying some non-tabular information using a tabular layout, attempting to create an accordion functionality without jquery. What I am attempting to do should look similar to the following:
// HTML
<div class="table">
<div class="row header">
<span class="cell">ABCDEFGHIJ</span>
<span class="cell">1234567890</span>
</div>
<div class="content">
<div class="row">
<span class="cell">ABCDEFGHIJ</span>
<span class="cell">1234567890</span>
</div>
<div class="row">
<span class="cell">ABCDEFGHIJ</span>
<span class="cell">1234567890</span>
</div>
</div>
</div>
/* CSS */
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.cell {
display: table-cell;
}
.content {
width: 100%;
}
The above doesn't work as intended, however. I tried changing the content <div>
to different combinations of class names but the nested rows do not span across the entire width of the outer table in both cases, only within the first column.
If I am using actual tables, the above can be resolved using multiple <tbody>
to implement the accordion. However, best practices would recommend contexts such as mine to not use tables, for which I am unable to find any relevant solution online. What is an equivalent solution for my problem?
<tbody>
tag istable-row-group