bijoe: improve style of data tables

bijoe/templates/bijoe/cube.html

@@ -15,8 +15,29 @@ input[type=date] {
 select {
   width: 100%;
 }
-table {
+
+table.bijoe-table {
+  display: flex;
+  flex-flow: column;
   padding-left: 2em;
+  width: 80%;
+  height: 70vh;
+}
+
+table.bijoe-table thead {
+  flex: 0 0 auto;
+  display: table;
+  table-layout: fixed;
+}
+table.bijoe-table tr {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+table.bijoe-table tbody {
+  flex: 1 1 auto;
+  display: block;
+  overflow-y: auto; 
 }
 input[type=submit] {
   float: right;
@@ -24,13 +45,9 @@ input[type=submit] {
   position: relative;
 }
 .filter { display: inline-block; }
-td {
-  width: 10em;
-}
 th {
   text-overflow: ellipsis;
   text-align: left;
-  width: 30px;
 }
 </style>
 {% endblock %}
@@ -89,13 +106,13 @@ th {
     {% endfor %}
   </form>
   {% if data %}
-    <table>
+    <table class="bijoe-table">
       <thead>
         {% for dimension in drilldown %}
-          <th>{{ dimension.label.capitalize }}</th>
+          <th><span>{{ dimension.label.capitalize }}</span></th>
         {% endfor %}
         {% for measure in measures %}
-          <th>{{ measure.label.capitalize }}</th>
+          <th><span>{{ measure.label.capitalize }}</span></th>
         {% endfor %}
       </thead>
       <tbody>