Skip to content

Instantly share code, notes, and snippets.

@barneycarroll
Last active March 18, 2024 10:24
Show Gist options
  • Save barneycarroll/795e7a60aa358e7a416dbd7b738f7687 to your computer and use it in GitHub Desktop.
Save barneycarroll/795e7a60aa358e7a416dbd7b738f7687 to your computer and use it in GitHub Desktop.
Grid tables reset
@property --columns {
syntax: '<integer>';
inherits: false;
initial-value: 1;
}
table {
display: grid;
grid-template-columns: repeat(var(--columns, 1), auto);
}
thead,
tbody,
tr {
display: contents;
}
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(2)) { --columns: 2; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(3)) { --columns: 3; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(4)) { --columns: 4; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(5)) { --columns: 5; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(6)) { --columns: 6; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(7)) { --columns: 7; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(8)) { --columns: 8; }
table:has(> :where(tbody, thead) > tr > :where(th, td):last-child:nth-child(9)) { --columns: 9; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment