fix styling for table filters th border

src/components/cards/CardsOverview.svelte

@@ -54,7 +54,7 @@
     bind:runner
     bind:editable
     bind:original_data
-    on:dataUpdated={(handler.setRows(current_cards))}
+    on:dataUpdated={handler.setRows(current_cards)}
   />
 {/if}
 
@@ -78,7 +78,7 @@
         <table>
           <thead>
             <tr>
-              <th>
+              <th style="border-bottom: 1px solid #ddd;">
                 <input
                   type="checkbox"
                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
@@ -95,14 +95,14 @@
               <Th {handler} orderBy="code">{$_("code")}</Th>
               <Th {handler} orderBy="runner">{$_("runner")}</Th>
               <Th {handler} orderBy="status">{$_("status")}</Th>
-              <th>{$_("action")}</th>
+              <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
             </tr>
             <tr>
-              <th />
+              <th style="border-bottom: 1px solid #ddd;" />
               <ThFilter {handler} filterBy="code" />
               <ThFilter {handler} filterBy="runner" />
               <ThFilterStatus {handler} />
-              <th />
+              <th style="border-bottom: 1px solid #ddd;" />
             </tr>
           </thead>
           <tbody>

src/components/cards/ThFilterStatus.svelte

@@ -10,10 +10,9 @@
       setTimeout(() => {
         if (`${selected}`.trim()) {
           if (selected === "all") {
-           handler.filter('', 'enabled') 
-          }
-          else{
-            handler.filter(selected, 'enabled')
+            handler.filter("", "enabled");
+          } else {
+            handler.filter(selected, "enabled");
           }
         }
       }, 50);
@@ -22,8 +21,25 @@
     name="statusfilter"
     id="statusfilter"
   >
-    <option value="all">{$_('all')}</option>
+    <option value="all">{$_("all")}</option>
     <option value="true">{$_("enabled")}</option>
     <option value="false">{$_("disabled")}</option>
   </select>
 </th>
+
+<style>
+  th {
+    border-bottom: 1px solid #e0e0e0;
+  }
+  select {
+    margin: -1px 0 0 0;
+    padding: 0;
+    width: 100%;
+    height: 24px;
+    border: none;
+    text-align: center;
+    background: inherit;
+    outline: 0;
+    font-size: 14px;
+  }
+</style>

src/components/runners/RunnersOverview.svelte

@@ -73,7 +73,7 @@
       <table>
         <thead>
           <tr>
-            <th>
+            <th style="border-bottom: 1px solid #ddd;">
               <input
                 type="checkbox"
                 class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
@@ -91,19 +91,19 @@
             <Th {handler} orderBy="firstname">First Name</Th>
             <Th {handler} orderBy="middlename">Middle Name</Th>
             <Th {handler} orderBy="lastname">Last Name</Th>
-            <th>Gruppe</th>
+            <th style="border-bottom: 1px solid #ddd;">Gruppe</th>
             <Th {handler} orderBy="distance">Distanz</Th>
-            <th>{$_("action")}</th>
+            <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
           </tr>
           <tr>
-            <th />
+            <th style="border-bottom: 1px solid #ddd;" />
             <ThFilter {handler} filterBy="id" />
             <ThFilter {handler} filterBy="firstname" />
             <ThFilter {handler} filterBy="middlename" />
             <ThFilter {handler} filterBy="lastname" />
             <ThFilterGroup groups={selectgroups} {handler} />
-            <th />
-            <th />
+            <th style="border-bottom: 1px solid #ddd;" />
+            <th style="border-bottom: 1px solid #ddd;" />
           </tr>
         </thead>
         <tbody>