HOMEPAGE

details table

a table made from a (sub)grid of details elements.

a
b
c
blah blah
1
2
three
blah blah
1
2
three
4
5
6
seven
blah blah
1
2
5
6
seven
webc
<div class="detable">
	<div class="detable-head">
			<div webc:for="column of table.labels" webcif="row" @text="column"></div>
	</div>
	<details webc:for="row of table.data" webc:if="table">
		<div @text="row.more"></div>
		<summary>
			<div webc:for="column of row.data" webcif="row" @text="column"></div>
		</summary>
	</details>
</div>
css
.detable {
  &:has(details > summary > div:nth-child(1)) { --columns: 1; }
  &:has(details > summary > div:nth-child(2)) { --columns: 2; }
  &:has(details > summary > div:nth-child(3)) { --columns: 3; }
  &:has(details > summary > div:nth-child(4)) { --columns: 4; }
  &:has(details > summary > div:nth-child(5)) { --columns: 5; }
  &:has(details > summary > div:nth-child(6)) { --columns: 6; }
  &:has(details > summary > div:nth-child(7)) { --columns: 7; }
  &:has(details > summary > div:nth-child(8)) { --columns: 8; }
  &:has(details > summary > div:nth-child(9)) { --columns: 9; }
  display: grid;
}
details,
summary,
.detable-head {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / calc(var(--columns) + 1);
}
details::details-content {
  grid-area: auto / span var(--columns);
}