Fix wrong use of thead and add caption styling

The 'Data in a table' example table wrongly uses `thead` for a caption. This moves that into a `caption` element. And it adds some basic styling for it, as there wasn't any yet.
alphagov · May 31, 2017 · 704da1b · 704da1b
1 parent 013883f
commit 704da1b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/app/views/snippets/data_table.html b/app/views/snippets/data_table.html
@@ -1,9 +1,5 @@
 <table>
-  <thead>
-    <tr>
-      <th colspan="2">Dates and amounts</th>
-    </tr>
-  </thead>
+  <caption>Dates and amounts</caption>
   <tbody>
     <tr>
       <td>First 6 weeks</td>
@@ -14,7 +10,7 @@
       <td>£109.80 per week</td>
     </tr>
     <tr>
-     <td>Total estimated pay</td>
+      <td>Total estimated pay</td>
       <td>£4,282.20</td>
     </tr>
     <tr>

diff --git a/assets/sass/elements/_tables.scss b/assets/sass/elements/_tables.scss
@@ -30,6 +30,11 @@ table {
   td.numeric {
     font-family: $toolkit-font-stack-tabular;
   }
+
+  caption {
+    text-align: left;
+    font-weight: 700;
+  }
 }
 
 .table-font-xsmall {