fix(Table): use tr as separator (#4083)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Table.vue

@@ -366,6 +366,8 @@ defineExpose({
             </slot>
           </th>
         </tr>
+
+        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
       </thead>
 
       <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">

src/theme/table.ts

@@ -5,11 +5,12 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative overflow-auto',
     base: 'min-w-full overflow-clip',
     caption: 'sr-only',
-    thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)',
+    thead: 'relative',
     tbody: 'divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary',
     tr: 'data-[selected=true]:bg-elevated/50',
     th: 'px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+    separator: 'absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)',
     empty: 'py-6 text-center text-sm text-muted',
     loading: 'py-6 text-center'
   },
@@ -27,7 +28,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     loading: {
       true: {
-        thead: 'after:absolute after:bottom-0 after:inset-x-0 after:h-px'
+        thead: 'after:absolute after:z-[1] after:h-px'
       }
     },
     loadingAnimation: {