Sticky header in tables

Author: matyldv

src/ralph/static/src/scss/_overrides.scss

@@ -82,10 +82,6 @@ select {
         float: left;
     }
 }
-.result-list {
-    overflow-x: auto;
-}
-
 .tooltip {
     max-width: 600px;
 }

src/ralph/static/src/scss/components/bulk_edit.scss

@@ -1,5 +1,4 @@
 .bulk-edit #content-main {
-    overflow-x: auto;
     .with-tabs {
         margin-bottom: 60px;
     }

src/ralph/static/src/scss/components/tables.scss

@@ -105,3 +105,43 @@ table {
         }
     }
 }
+
+#result_list {
+    thead th {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background: $thead-bg-color;
+
+        &:first-child {
+            left: 0;
+            z-index: 3;
+        }
+    }
+
+    tbody tr {
+        td:first-child,
+        th:first-child {
+            position: sticky;
+            left: 0;
+            z-index: 1;
+        }
+
+        &:nth-child(even) td:first-child,
+        &:nth-child(even) th:first-child {
+            background-color: $row-even-bg-color;
+        }
+        &:nth-child(odd) td:first-child,
+        &:nth-child(odd) th:first-child {
+            background-color: $row-odd-bg-color;
+        }
+        &:nth-child(even):hover td:first-child,
+        &:nth-child(even):hover th:first-child {
+            background-color: darken($row-even-bg-color, 1%);
+        }
+        &:nth-child(odd):hover td:first-child,
+        &:nth-child(odd):hover th:first-child {
+            background-color: darken($row-odd-bg-color, 1%);
+        }
+    }
+}