diff --git a/demos/tables.html b/demos/tables.html
new file mode 100644
index 0000000..dccca89
--- /dev/null
+++ b/demos/tables.html
@@ -0,0 +1,191 @@
+
+
+
+
+ CSS Chassis - Tables
+
+
+
+
+
+
+
+
+CSS Chassis
+
+
+
+Tables
+
+Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
+Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
+Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 4 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 5 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
+
+
diff --git a/scss/atoms/_overflow-indicator.scss b/scss/atoms/_overflow-indicator.scss
new file mode 100644
index 0000000..9392141
--- /dev/null
+++ b/scss/atoms/_overflow-indicator.scss
@@ -0,0 +1,46 @@
+// ==========================================================================
+// Overflow Indicator
+//
+// Shows indicator when there is more horizontal content.
+//
+// EXAMPLE
+//
+// ==========================================================================
+
+.overflow-indicator__wrapper {
+ position: relative;
+ z-index: 1;
+ margin-bottom: em( 20px );
+ border: 0;
+ background: #fff no-repeat;
+ background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent );
+ background-position: 0 0, 100% 0;
+ background-size: 10px 100%;
+ overflow: auto;
+}
+
+.overflow-indicator__wrapper > .overflow-indicator__content {
+ position: relative;
+ margin-bottom: 0;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ margin: 0 -30px 0 0;
+ width: 30px;
+ background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
+ }
+ &:after {
+ left: auto;
+ right: 0;
+ margin: 0 0 0 -30px;
+ background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
+ }
+}
diff --git a/scss/atoms/_tables.scss b/scss/atoms/_tables.scss
new file mode 100644
index 0000000..f1f2825
--- /dev/null
+++ b/scss/atoms/_tables.scss
@@ -0,0 +1,92 @@
+/*
+* ==========================================================================
+* Typography
+* ==========================================================================
+*/
+
+table {
+ width: 100%;
+ margin-bottom: em( 20px, 16px );
+ font-size: em( 16px );
+ text-align: left;
+}
+
+thead {
+ border-bottom: 1px solid #eee;
+
+ > tr > th {
+ border-top: 0;
+ }
+}
+
+td {
+ border-top: 1px solid #eee;
+ padding: em( 12px, 16px );
+}
+
+th {
+ border-top: 1px solid #eee;
+ padding: em( 12px, 12px );
+ color: #666;
+ font-weight: 400;
+ font-size: em( 12px, 16px );
+ white-space: nowrap;
+}
+
+table {
+ .active {
+ background-color: #f5f5f5;
+ }
+ .success {
+ background-color: #dff0d8;
+ }
+ .warning {
+ background-color: #fcf8e3;
+ }
+ .danger {
+ background-color: #f2dede;
+ }
+ .info {
+ background-color: #d9edf7;
+ }
+}
+
+.striped-table>tbody>tr:nth-of-type(odd), {
+ background-color: #f2f2f2;
+}
+
+.table--responsive {
+ position: relative;
+ z-index: 1;
+ margin-bottom: em( 20px );
+ border: 0;
+ background: #fff no-repeat;
+ background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent );
+ background-position: 0 0, 100% 0;
+ background-size: 10px 100%;
+ overflow: auto;
+
+ table {
+ position: relative;
+ margin-bottom: 0;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ margin: 0 -30px 0 0;
+ width: 30px;
+ background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
+ }
+ &:after {
+ left: auto;
+ right: 0;
+ margin: 0 0 0 -30px;
+ background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
+ }
+ }
+}
diff --git a/scss/lint.scss b/scss/lint.scss
index d3cf487..9273ac5 100644
--- a/scss/lint.scss
+++ b/scss/lint.scss
@@ -15,7 +15,9 @@
@import
"atoms/icons/icons",
- "atoms/typography/typography";
+ "atoms/tables",
+ "atoms/typography/typography",
+ "atoms/overflow-indicator";
@import
"views/main";