Tables: Add fullwidth table option

jquery-archive · Jun 14, 2016 · 8410e05 · 8410e05
1 parent 5d8723e
commit 8410e05
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/demos/tables.html b/demos/tables.html
@@ -17,6 +17,7 @@ <h1>CSS Chassis</h1>
 
 <h2>Tables</h2>
 
+<h3>Basic Table</h3>
 <p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
 
 <table class="table">
@@ -50,6 +51,7 @@ <h2>Tables</h2>
 	</tbody>
 </table>
 
+<h3>Div Table</h3>
 <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">
@@ -83,5 +85,39 @@ <h2>Tables</h2>
 	</div>
 </div>
 
+<h3>Full Width Table</h3>
+<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
+
+<table class="table-fullwidth">
+	<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 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 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 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>
+
 </body>
 </html>
diff --git a/scss/atoms/tables/_mixins.scss b/scss/atoms/tables/_mixins.scss
@@ -3,3 +3,9 @@
 * Table mixins
 * ==========================================================================
 */
+@mixin table($margin, $font-size) {
+	display: table;
+	margin: $margin;
+	font-size: $font-size;
+	text-align: left;
+}
diff --git a/scss/atoms/tables/_tables.scss b/scss/atoms/tables/_tables.scss
@@ -9,10 +9,12 @@
 	"mixins";
 
 .table {
-	display: table;
-	margin: map-get($table-base, margin);
-	font-size: map-get($table-base, font-size);
-	text-align: left;
+	@include table(map-get($table-base, margin), map-get($table-base, font-size));
+}
+
+.table-fullwidth {
+	width: 100%;
+	@include table(map-get($table-base, margin), map-get($table-base, font-size));
 }
 
 /* thead */