details table

<div class="detable" webc:if="table">
	<div class="detable-head">
			<div webc:for="column of table.labels" @text="column"></div>
	</div>
	<template webc:for="row of table.data" webc:nokeep>
		<details webc:if="row.more">
			<div @text="row.more"></div>
			<summary>
				<div webc:for="column of row.data" webc:if="column" @text="column"></div>
			</summary>
		</details>
		<div webc:else>
				<div webc:for="column of row.data" webc:if="column" @text="column"></div>
		</div>
	</template>
</div>
<div class="detable">
	<slot></slot>
</div>
<style webc:is="css.detable" webc:nokeep></style>

<div class="detable">
  <div class="detable-head">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
  <details>
    <div>blah blah</div>
    <summary>
      <div>1</div>
      <div>2</div>
      <div>three</div>
    </summary>
  </details>
  <details>
    <div>blah blah</div>
    <summary>
      <div>1</div>
      <div>2</div>
      <div>three</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>seven</div>
    </summary>
  </details>
  <details>
    <div>blah blah</div>
    <summary>
      <div>1</div>
      <div>2</div>
      <div>5</div>
      <div>6</div>
      <div>seven</div>
    </summary>
  </details>
</div>

.detable {
	&:has(> details > summary > :nth-child(1), > div:not(.detable-head) > :nth-child(1)) { --columns: 1; }
	&:has(> details > summary > :nth-child(2), > div:not(.detable-head) > :nth-child(2)) { --columns: 2; }
	&:has(> details > summary > :nth-child(3), > div:not(.detable-head) > :nth-child(3)) { --columns: 3; }
	&:has(> details > summary > :nth-child(4), > div:not(.detable-head) > :nth-child(4)) { --columns: 4; }
	&:has(> details > summary > :nth-child(5), > div:not(.detable-head) > :nth-child(5)) { --columns: 5; }
	&:has(> details > summary > :nth-child(6), > div:not(.detable-head) > :nth-child(6)) { --columns: 6; }
	&:has(> details > summary > :nth-child(7), > div:not(.detable-head) > :nth-child(7)) { --columns: 7; }
	&:has(> details > summary > :nth-child(8), > div:not(.detable-head) > :nth-child(8)) { --columns: 8; }
	&:has(> details > summary > :nth-child(9), > div:not(.detable-head) > :nth-child(9)) { --columns: 9; }

	display: grid;
	details, summary, .detable-head, & > div {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / calc(var(--columns) + 1);
	}
	details::details-content {
		grid-area: auto / span var(--columns);
	}

	/* Fallback for browsers without ::details-content. Each <details> here has a
	   single non-summary child, so targeting it directly is equivalent. */
	@supports not selector(::details-content) {
		details > *:not(summary) {
			grid-area: auto / span var(--columns);
		}
	}

	details, & > div {
		border: solid var(--mix-2);
		border-width: 0px 1px 1px 1px;
	}
	details > summary {
		border-bottom: dashed var(--mix-3);
		border-width: .15ex;
		transition: border 300ms linear;
		cursor: pointer;
	}

	details > summary:hover {
		border-width: .5ex;
		border-bottom: dashed var(--mix-2);
	}

	> *:nth-child(2) {
		border-width: 1px 1px 1px 1px;
	}
	> *:last-child {
		border-width: 0 1px 1px 1px;
	}
	details[open]::details-content {
		background-color: var(--mix-1);
		padding: .5ex 1ch;
	}
	@supports not selector(::details-content) {
		details[open] > *:not(summary) {
			background-color: var(--mix-1);
			padding: .5ex 1ch;
		}
	}
	.detable-head > *, summary > *, & > div > * {
		padding: .66ex 1ch;
		text-align: left;
	}
	.detable-head {
		margin-bottom: .5ex;
		background-color: var(--mix-1);
		border: 1px solid var(--mix-2);
	}
}