Improve readability of large grid with a lot of data

When a large table is displayed and is larger than the screen size, it
is not possible to scroll to see *all* the data.  One can zoom-out to
have a accomodate more data, but this does not fix the issue as:
  1. The displayed data is smaller, making it harder to read it beyond
     checking the color that represent the state of the metric;
  2. Zooming out is limited and at some point more data is still out of
     sight.

This make the table scrollable in its container.  Both horizontal and
vertical headers stick to their position to make it easier to track what
is being viewed.

Author: smortex

lib/riemann/dash/views/css.scss

@@ -441,6 +441,7 @@ h2 {
     left: 0;
     right: 0;
     bottom: 0;
+    overflow: auto;
   }
 
   .bar {
@@ -468,18 +469,36 @@ h2 {
 
     th {
       text-align: right;
+      background-color: #fff;
     }
 
     thead {
       margin: 0;
       padding: 0;
 
       th {
-        // Work around https://bugs.webkit.org/show_bug.cgi?id=20040
-        position: relative;
-        top: 3px;
         vertical-align: bottom;
         text-align: left;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &:first-child {
+	  left: 0;
+	  z-index: 2;
+        }
+      }
+    }
+
+    tbody {
+      tr:hover, tr:hover th {
+        background-color: $cream;
+      }
+
+      th {
+        position: sticky;
+	left: 0;
+	z-index: 1;
       }
     }
   }