Adjust fixed table widths

src/lib/ldb/staff/table/table-generator.svelte

@@ -151,13 +151,7 @@
   }
 </script>
 
-<div>
   <table>
-    <tr>
-      <th class="other" colspan="4" />
-      <th class="timepair" colspan="2">Arrival</th>
-      <th class="timepair" colspan="2">Departure</th>
-    </tr>
     <tr>
       <th class="id">ID</th>
       <th class="from">From</th>
@@ -168,6 +162,11 @@
       <th class="time">Sch</th>
       <th class="time">Exp</th>
     </tr>
+    <tr>
+      <th class="other" colspan="4" />
+      <th class="timepair" colspan="2">Arrival</th>
+      <th class="timepair" colspan="2">Departure</th>
+    </tr>
     {#each services as service}
       {#await generateServiceData(service)}
         <tr><td colspan="8">Loading Service Data...</td></tr>
@@ -212,48 +211,43 @@
       {/await}
     {/each}
   </table>
-</div>
 
 <style>
-  div {
-    width: auto;
-    margin: auto;
-  }
   table {
-    table-layout: auto;
+    table-layout: fixed;
-    text-align: center;
+    width: 100%;
-    min-width: 100%;
-    font-size: 14px;
     margin: 0px;
     padding: 0px;
     color: white;
   }
 
+  th {
+    font-size: 12px;
+    margin: 0px;
+  }
+
   .dataRow {
+    font-family: firamono, monospace;
+    vertical-align: bottom;
     cursor: pointer;
+    font-size: 13px;
   }
 
   /* Table Columns */
-  .other {
-    width: 30%;
-  }
   .id {
-    width: 5%;
+    width: 8%;
   }
   .from {
-    width: 10%;
+    width: 14%;
   }
   .to {
-    width: 10%;
+    width: 14%;
   }
   .plat {
-    width: 5%;
+    width: 6%;
-  }
-  .timepair {
-    width: 70%;
   }
   .time {
-    width: 5%;
+    width: 9%;
   }
 
   td.id {
@@ -266,10 +260,19 @@
     color: yellow;
     text-align: left;
   }
+
+  td.to, th.to {
+    text-align: right;
+  }
+  td.from, th.from {
+    text-align: left;
+  }
   .tableTxt {
     text-align: left;
     padding-left: 2px;
     color: var(--second-text-color);
+    vertical-align: top;
+    font-size: 12px;
   }
 
   /* Conditional Classes */

src/routes/pis/+page.svelte

@@ -84,7 +84,7 @@
       </tr>
       {#each data as item}
         <tr>
-          <td class="toc toc-data">{item.operator || '-'}</td>
+          <td class="toc toc-data">{item.toc || '-'}</td>
           <td class="code">{item.code}</td>
           <td class="stops stops-data">{item.stops.join('  ')}</td>
         </tr>