Rework the tables componets styles to work for all browsers, :has() support is limited.

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);
+      }
     }
   }
-
 }