Apply a bunch of style fixes.

activetable/activetable.py

@@ -97,11 +97,16 @@ class ActiveTableXBlock(StudioEditableXBlockMixin, XBlock):
         self.response_cells = {}
         for row, height in zip(self.tbody, self._row_heights[1:]):
             row['height'] = height
+            if row['index'] & 1:
+                row['class'] = 'even'
+            else:
+                row['class'] = 'odd'
             for cell in row['cells']:
                 cell.id = 'cell_{}_{}'.format(cell.index, row['index'])
                 if not cell.is_static:
                     self.response_cells[cell.id] = cell
                     cell.value = self.answers.get(cell.id)
+                    cell.height = height - 2
                     if isinstance(cell, NumericCell) and cell.abs_tolerance is None:
                         cell.set_tolerance(self.default_tolerance)
                     if cell.value is None:

activetable/static/css/activetable.css

@@ -17,10 +17,12 @@
     line-height: 1.5em;
     padding: 0 10px;
     border: 1px solid #c0c0c0;
+    vertical-align: middle;
 }
 .activetable_block th {
     text-align: left;
     text-shadow: 0 1px 0 #ffffff;
+    font-weight: bold;
 }
 /* cells that allow user input */
 .activetable_block td.active {
@@ -57,6 +59,9 @@
     display: block;
     width: 100%;
     background-color: transparent;
+    border-radius: initial;
+    background-image: initial;
+    box-shadow: initial;
 }
 .activetable_block input[type="text"]:hover {
     outline: 3px solid #a0a0ff;
@@ -80,3 +85,17 @@
 .activetable_block #activetable-help-button:hover {
     color: #bd9730;
 }
+.activetable_block .status, .activetable_block .status-message {
+    margin: 2em 0;
+}
+.activetable_block .status {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: url("/static/images/unanswered-icon.png") center no-repeat;
+}
+.activetable_block .action .check {
+    height: 40px;
+    font-weight: 600;
+    text-transform: uppercase;
+}

activetable/templates/html/activetable.html

@@ -17,7 +17,7 @@
     </thead>
     <tbody>
       {% for row in tbody %}
-      <tr style="height: {{ row.height }}px;">
+      <tr class="{{ row.class }}" style="height: {{ row.height }}px;">
         {% for cell in row.cells %}
         <td class="{{ cell.classes }}" id="{{ cell.id }}">
           {% if cell.is_static %}
@@ -38,6 +38,6 @@
   <div class="status"></div>
   <div class="status-message"></div>
   <div class="action">
-    <button class="check Check"><span class="sr"> your answer</span><span class="check-label">Check</span></button>
+    <button class="check"><span class="check-label">Check</span><span class="sr"> your answer</span></button>
   </div>
 </div>