From 3bf7c9ad3ad8ac4150fbcd14928c05e890963b10 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 24 Apr 2023 09:20:25 +0200
Subject: [PATCH] Rework the tables componets styles to work for all browsers,
 :has() support is limited.

---
 assets/sass/components/tables/_tables.scss | 35 +++++++++++++---------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/assets/sass/components/tables/_tables.scss b/assets/sass/components/tables/_tables.scss
index 4ae3925..8c96bd2 100644
--- a/assets/sass/components/tables/_tables.scss
+++ b/assets/sass/components/tables/_tables.scss
@@ -7,17 +7,22 @@
     padding: var(--padding);
   }
 
-  tr:nth-child(odd) {
-    background-color: var(--color-row-odd);
+  thead {
+    tr {
+      background-color: var(--color-row-header);
+    }
   }
 
-  tr:nth-child(even) {
-    background-color: var(--color-row-even);
-  }
+  tbody {
+    tr {
+      &:nth-child(odd) {
+        background-color: var(--color-row-odd);
+      }
 
-  // Add first-of-type to increase specificity.
-  tr:first-of-type:has(th) {
-    background-color: var(--color-row-header);
+      &:nth-child(even) {
+        background-color: var(--color-row-even);
+      }
+    }
   }
 }
 
@@ -26,11 +31,6 @@
   --padding: .5rem;
 
   @include respond-to-max(s) {
-    th,
-    td {
-      padding: var(--padding);
-    }
-
     th {
       display: none;
     }
@@ -44,7 +44,14 @@
         content: attr(aria-label) ':';
         font-weight: var(--fw-bold);
       }
+
+      &:first-of-type {
+        padding-block-start: var(--padding);
+      }
+
+      &:last-of-type {
+        padding-block-end: var(--padding);
+      }
     }
   }
-
 }