Grid tables reset

grid-tables-reset.css

@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; }