<h1>Gridized table</h1>
<div class="section" style="--grid--: auto-flow / repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); --gap--: 4rem 2rem;">
<section>
<h2>Normal</h2>
<table class="__table-normal__bordered">
<thead>
<tr>
<th></th>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td rowspan="4">A1</td>
<td colspan="4">B1</td>
<!--td>C1</td-->
<!--td>D1</td-->
<!--td>E1</td-->
</tr>
<tr>
<th scope="row">2</th>
<!--td>A2</td-->
<td rowspan="2">B2</td>
<td colspan="2">C2</td>
<!--td>D2</td-->
<td rowspan="4">E2</td>
</tr>
<tr>
<th scope="row">3</th>
<!--td>A3</td-->
<!--td>B3</td-->
<td>C3</td>
<td rowspan="2">D3</td>
<!--td>E3</td-->
</tr>
<tr>
<th scope="row">4</th>
<!--td>A4</td-->
<td colspan="2">B4</td>
<!--td>C4</td-->
<!--td>D4</td-->
<!--td>E4</td-->
</tr>
<tr>
<th scope="row">5</th>
<td colspan="4">A5</td>
<!--td>B5</td-->
<!--td>C5</td-->
<!--td>D5</td-->
<!--td>E5</td-->
</tr>
</tbody>
</table>
</section>
<section>
<h2>Gridized</h2>
<table class="__table-gridized__bordered">
<thead>
<tr>
<th></th>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td rowspan="4">A1</td>
<td colspan="4">B1</td>
<!--td>C1</td-->
<!--td>D1</td-->
<!--td>E1</td-->
</tr>
<tr>
<th scope="row">2</th>
<!--td>A2</td-->
<td rowspan="2">B2</td>
<td colspan="2">C2</td>
<!--td>D2</td-->
<td rowspan="4">E2</td>
</tr>
<tr>
<th scope="row">3</th>
<!--td>A3</td-->
<!--td>B3</td-->
<td>C3</td>
<td rowspan="2">D3</td>
<!--td>E3</td-->
</tr>
<tr>
<th scope="row">4</th>
<!--td>A4</td-->
<td colspan="2">B4</td>
<!--td>C4</td-->
<!--td>D4</td-->
<!--td>E4</td-->
</tr>
<tr>
<th scope="row">5</th>
<td colspan="4">A5</td>
<!--td>B5</td-->
<!--td>C5</td-->
<!--td>D5</td-->
<!--td>E5</td-->
</tr>
</tbody>
</table>
</section>
</div>
<section>
<h2>Resizable gridized table</h2>
<table class="__table-gridized__bordered __table-gridized__resizable" style="--column-width-1: 6rem; --column-width-2: minmax(6rem, 12rem); --column-width-3: minmax(6rem, 1fr); --column-width-4: minmax(6rem, max-content);">
<thead>
<tr>
<th scope="col">6rem</th>
<th scope="col">6rem – 12rem</th>
<th scope="col">6rem – 1fr</th>
<th scope="col">6rem – max-content</th>
</tr>
</thead>
<tbody>
<tr>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</td>
</tr>
</tbody>
</table>
</section>[style~="--gap--:"] {
gap: var(--gap--);
}
[style~="--grid--:"] {
display: grid;
grid: var(--grid--);
& > * {
margin: 0;
}
}
* {
box-sizing: border-box;
line-height: calc(0.75rem + 1em);
}
html {
font-family: sans-serif;
}
body {
margin: 0;
min-block-size: 200dvb;
padding-block: 2rem;
padding-inline: max(2rem, 50dvi - 30rem);
}
:is(section, div:where(.section)) {
margin: 0;
&:is(* + *) {
margin-block-start: 4rem;
}
&:has(+ *) {
margin-block-end: 4rem;
}
}
:is(h1, h2) {
margin: 0;
&:is(* + *) {
margin-block-start: 4rem;
}
}
table {
margin: 0;
&:is(* + *) {
margin-block-start: 2rem;
}
}
:is(caption, td, th) {
text-align: inherit;
}
caption {
font-weight: bolder;
}
:is(td, th) {
padding: 0;
}
[class*="__table-normal__"] {
border-spacing: 0;
inline-size: 100%;
}
.__table-normal__bordered {
border: solid 1px color-mix(in srgb, transparent, currentcolor 50%);
border-spacing: 1px;
& > * > tr > * {
border: solid 1px color-mix(in srgb, transparent, currentcolor 50%);
padding-block: calc(0.5lh - 0.5em);
padding-inline: calc(1lh - 1em);
}
}
[class*="__table-gridized__"] {
--column-width: auto;
--column-width-1: var(--column-width);
--column-width-2: ;
--column-width-3: ;
--column-width-4: ;
--column-width-5: ;
--column-width-6: ;
--column-width-7: ;
--column-width-8: ;
display: grid;
grid:
auto-flow dense
/
var(--column-width-1)
var(--column-width-2)
var(--column-width-3)
var(--column-width-4)
var(--column-width-5)
var(--column-width-6)
var(--column-width-7)
var(--column-width-8);
overflow: auto;
&:has(> * > tr > :nth-child(2)) {
--column-width-2: var(--column-width);
}
&:has(> * > tr > :nth-child(3)) {
--column-width-3: var(--column-width);
}
&:has(> * > tr > :nth-child(4)) {
--column-width-4: var(--column-width);
}
&:has(> * > tr > :nth-child(5)) {
--column-width-5: var(--column-width);
}
&:has(> * > tr > :nth-child(6)) {
--column-width-6: var(--column-width);
}
&:has(> * > tr > :nth-child(7)) {
--column-width-7: var(--column-width);
}
&:has(> * > tr > :nth-child(8)) {
--column-width-8: var(--column-width);
}
& > caption {
display: block;
grid-column: 1 / -1;
}
& > colgroup,
& > * > col {
display: none;
}
& > :is(thead, tbody, tfoot),
& > * > tr {
display: contents;
}
& > * > tr > * {
display: block;
&:where([rowspan="2"]) {
grid-row: span 2;
}
&:where([rowspan="3"]) {
grid-row: span 3;
}
&:where([rowspan="4"]) {
grid-row: span 4;
}
&:where([rowspan="5"]) {
grid-row: span 5;
}
&:where([rowspan="6"]) {
grid-row: span 6;
}
&:where([rowspan="7"]) {
grid-row: span 7;
}
&:where([rowspan="8"]) {
grid-row: span 8;
}
&:where([colspan="2"]) {
grid-column: span 2;
}
&:where([colspan="3"]) {
grid-column: span 3;
}
&:where([colspan="4"]) {
grid-column: span 4;
}
&:where([colspan="5"]) {
grid-column: span 5;
}
&:where([colspan="6"]) {
grid-column: span 6;
}
&:where([colspan="7"]) {
grid-column: span 7;
}
&:where([colspan="8"]) {
grid-column: span 8;
}
}
}
.__table-gridized__bordered {
border: solid 1px color-mix(in srgb, transparent, currentcolor 50%);
gap: 1px;
padding: 1px;
& > * > tr > * {
border: solid 1px color-mix(in srgb, transparent, currentcolor 50%);
padding-block: calc(0.5lh - 0.5em);
padding-inline: calc(1lh - 1em);
}
}
.__table-gridized__resizable {
resize: both;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.