Use borders rather than block colors for coloured tables under darktheme

RIGS/static/scss/dark_screen.scss

@@ -66,6 +66,30 @@
     .fc-today {
         padding: 0 !important;
     }
+    .table {
+        border-collapse: separate !important;
+        border-spacing: 0;
+    }
+    .table tr th {
+      border-right: 0 !important;
+    }
+    .table tr td {
+      border-left: 0 !important;
+    }
+    .table tr td:not(:last-child) {
+        border-right: 0 !important;
+    }
+    @each $color, $value in $theme-colors {
+        .table-#{$color} {
+            > td,th {
+                border: 0.3em solid theme-color-level($color, -6) !important;
+            }
+            > * {
+                color: white !important;
+                background-color: #222 !important;
+            }
+        }
+    }
     del {
       color: black;
       background-color: $danger;

RIGS/templates/partials/event_table.html

@@ -2,7 +2,7 @@
 {% load cache %}
 {% cache None event_table request.user %}
 <div class="table-responsive">
-    <table class="table mb-0">
+    <table class="table mb-0" id="event_table">
         <thead>
             <tr>
                 <th scope="col">#</th>
@@ -29,7 +29,7 @@
                     table-warning
                     {% endif %}" id="event_row">
             <!---Number-->
-            <th scope="row" id="event_number"></th>
+            <th scope="row" id="event_number">{{ event.display_id }}</th>
             <!--Dates & Times-->
             <td id="event_dates">
                 <span class="text-nowrap">Start: <strong>{{ event.start_date|date:"D d/m/Y" }}</strong>