Tables: Convert element styles to classes and add example using divs

Author: kristyjy

demos/tables.html

@@ -19,38 +19,69 @@ <h2>Tables</h2>
 
 <p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
 
-<table>
-	<thead>
-		<tr>
-			<th scope="col">ID</th>
-			<th scope="col">Product</th>
-			<th scope="col">Category</th>
-			<th scope="col">Price</th>
+<table class="table">
+	<thead class="table-head">
+		<tr class="table-row">
+			<th class="table-heading" scope="col">ID</th>
+			<th class="table-heading" scope="col">Product</th>
+			<th class="table-heading" scope="col">Category</th>
+			<th class="table-heading" scope="col">Price</th>
 		</tr>
 	</thead>
-	<tbody>
-		<tr>
-			<th scope="row">1</th>
-			<td>T-Shirt</td>
-			<td>Apparel</td>
-			<td>$12.99</td>
+	<tbody class="table-body">
+		<tr class="table-row">
+			<th class="table-heading" scope="row">1</th>
+			<td class="table-cell">T-Shirt</td>
+			<td class="table-cell">Apparel</td>
+			<td class="table-cell">$12.99</td>
 		</tr>
-		<tr>
-			<th scope="row">2</th>
-			<td>Sweat Shirt</td>
-			<td>Apparel</td>
-			<td>$24.99</td>
+		<tr class="table-row">
+			<th class="table-heading" scope="row">2</th>
+			<td class="table-cell">Sweat Shirt</td>
+			<td class="table-cell">Apparel</td>
+			<td class="table-cell">$24.99</td>
 		</tr>
-		<tr>
-			<th scope="row">3</th>
-			<td>Necklace</td>
-			<td>Accessories</td>
-			<td>$29.99</td>
+		<tr class="table-row">
+			<th class="table-heading" scope="row">3</th>
+			<td class="table-cell">Necklace</td>
+			<td class="table-cell">Accessories</td>
+			<td class="table-cell">$29.99</td>
 		</tr>
 	</tbody>
 </table>
 
 <p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
 
+<div class="table">
+	<div class="table-head">
+		<div class="table-row">
+			<div class="table-heading" scope="col">ID</div>
+			<div class="table-heading" scope="col">Product</div>
+			<div class="table-heading" scope="col">Category</div>
+			<div class="table-heading" scope="col">Price</div>
+		</div>
+	</div>
+	<div class="table-body">
+		<div class="table-row">
+			<div class="table-heading" scope="row">1</div>
+			<div class="table-cell">T-Shirt</div>
+			<div class="table-cell">Apparel</div>
+			<div class="table-cell">$12.99</div>
+		</div>
+		<div class="table-row">
+			<div class="table-heading" scope="row">2</div>
+			<div class="table-cell">Sweat Shirt</div>
+			<div class="table-cell">Apparel</div>
+			<div class="table-cell">$24.99</div>
+		</div>
+		<div class="table-row">
+			<div class="table-heading" scope="row">3</div>
+			<div class="table-cell">Necklace</div>
+			<div class="table-cell">Accessories</div>
+			<div class="table-cell">$29.99</div>
+		</div>
+	</div>
+</div>
+
 </body>
 </html>

scss/atoms/_tables.scss

@@ -8,29 +8,47 @@
 	"dist/chassis",
 	"mixins";
 
-table {
+.table {
+	display: table;
 	margin: map-get($table-base, margin);
 	font-size: map-get($table-base, font-size);
 	text-align: left;
 }
 
-thead {
-	border-bottom: map-get($table-base, border);
-	> tr > th {
-		border-top: 0;
-	}
+/* thead */
+.table-head {
+	display: table-header-group;
 }
 
-td {
-	border-top: map-get($table-base, border);
-	padding: map-get($table-base, padding);
+/* tbody */
+.table-body {
+	display: table-row-group;
+}
+
+/* tfoot */
+.table-foot {
+	display: table-footer-group;
+}
+
+/* tr */
+.table-row {
+	display: table-row;
 }
 
-th {
+/* th */
+.table-heading {
+	display: table-cell;
 	border-top: map-get($table-base, border);
 	padding: map-get($table-base, padding);
 	color: map-get($colors-text, light);
 	font-weight: 400;
 	font-size: map-get($table-base, thead-font-size);
-	white-space: nowrap;
+	//white-space: nowrap;
+}
+
+/* td */
+.table-cell {
+	display: table-cell;
+	border-top: map-get($table-base, border);
+	padding: map-get($table-base, padding);
 }