diff --git a/section.css b/section.css
index a96ceb2..f4d458d 100644
--- a/section.css
+++ b/section.css
@@ -1,81 +1,53 @@
-.ok {
-  color: #5cff56; }
-
-.warning {
-  color: #ff4b41; }
-
-.green {
-  background: #c0ffb4; }
-
-.red {
-  background: #ff7c70; }
-
-.blue {
-  background: #c1c8ff; }
-
-.orange {
-  background: #ffbf7c; }
-
-.lightblue {
-  background: #b5ffff; }
-
-.yellow {
-  background: #fffe97; }
-
-.purple {
-  background: #bfa5ff; }
-
-.pink {
-  background: #ffa6e3; }
-
-.grey {
-  background: #dcdcdc; }
-
-.darkred {
-  background: #d16059; }
-
-.darkgreen {
-  background: #77d17c; }
-
-.darkblue {
-  background: #7ba9d1; }
-
-section.box {
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  margin: 5px 0 0 5px;
+  display: inline-block;
+  margin-top: 0.3rem;
+  overflow-x: auto; }
+  .box .inner {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    box-shadow: inset 1px 1px 0px 0px #ffffff;
+    padding: 10px; }
+
+.box-container {
   display: inline-block; }
 
-.box .inner {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  background-clip: padding-box;
-  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
-  box-shadow: inset 1px 1px 0px 0px #ffffff;
-  border: 1px solid #b7b7b7;
-  background: #f5f5ff;
-  padding: 10px; }
-
-section h1 {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+section.box {
   -moz-box-shadow: 0px 1px 0px 0px #f1f1f1;
   -webkit-box-shadow: 0px 1px 0px 0px #f1f1f1;
   box-shadow: 0px 1px 0px 0px #f1f1f1;
-  font-size: 1.3em;
-  border-bottom: 1px solid #b7b7b7;
-  margin-bottom: 5px;
-  text-shadow: 1px 1px 1px #ffffff; }
+  border: 1px solid #b7b7b7;
+  background: #fff; }
+  section.box section.box.orange {
+    border-top: 3px solid #FBA026; }
+    section.box section.box.orange.red {
+      border-top: 3px solid #B8312F; }
+    section.box section.box.orange.green {
+      border-top: 3px solid #41A85F; }
+    section.box section.box.orange.blue {
+      border-top: 3px solid #2C82C9; }
+    section.box section.box.orange.purple {
+      border-top: 3px solid #553982; }
+    section.box section.box.orange.darkblue {
+      border-top: 3px solid #2969B0; }
 
-section h2 {
+section header > h1 {
+  margin: 10px 10px 0 10px;
+  padding-bottom: 5px;
+  font-size: 1.1em;
+  text-shadow: 1px 1px 1px #ffffff;
+  border-bottom: 1px solid #e1e1e1; }
+section > h2 {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
diff --git a/section.scss b/section.scss
index 1e86ffd..247389e 100644
--- a/section.scss
+++ b/section.scss
@@ -4,6 +4,7 @@
     @include box-sizing(border-box);
     display: inline-block;
     margin-top: 0.3rem;
+    overflow-x: auto;
     
     .inner {
         @include box-sizing(border-box);
diff --git a/styles.css b/styles.css
index 7728be7..fd983ce 100644
--- a/styles.css
+++ b/styles.css
@@ -4529,7 +4529,8 @@ main {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
-  margin-top: 0.3rem; }
+  margin-top: 0.3rem;
+  overflow-x: auto; }
   .box .inner {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -4706,7 +4707,8 @@ table.table {
   box-sizing: border-box;
   width: 100%;
   font-size: 0.9em;
-  display: table; }
+  max-width: 100%;
+  overflow: hidden; }
   table.table caption {
     background: #fff;
     border-right: 1px solid #b7b7b7;
@@ -4733,8 +4735,6 @@ table.table {
       background: #fff; }
     table.table tbody tr:hover {
       background: #f0f0f0; }
-  table.table tbody a {
-    display: block; }
   table.table tbody tr:last-child td {
     border-bottom: 1px solid #b7b7b7; }
   table.table thead {
@@ -4766,14 +4766,18 @@ table.list td {
 
 @media screen and (max-width: 600px) {
   table.table {
-    border: 0;
-    width: 100%; }
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border: 0; }
     table.table thead {
       display: none; }
     table.table tbody tr {
       height: auto;
       display: block;
       margin-bottom: .625em; }
+      table.table tbody tr td:last-child {
+        border-bottom: 1px solid #b7b7b7; }
       table.table tbody tr:last-child td {
         border-bottom: none; }
         table.table tbody tr:last-child td:last-child {
@@ -4786,16 +4790,17 @@ table.list td {
       text-align: right;
       position: relative;
       height: 2rem;
-      line-height: 2rem; }
+      line-height: 2rem;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 100%; }
       table.table tbody td:before {
         content: attr(data-label);
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        margin-left: 20px;
-        font-weight: bold;
-        display: inline-block; } }
+        float: left;
+        margin-right: 10px;
+        font-weight: bold; }
+    table.table tfoot {
+      display: none; } }
 .nobreak {
   white-space: nowrap; }
 
diff --git a/table.css b/table.css
new file mode 100644
index 0000000..e958cb3
--- /dev/null
+++ b/table.css
@@ -0,0 +1,126 @@
+/* Global */
+/* Content Container */
+/* Content box */
+/* Navigation */
+/* Colors */
+.table {
+  background: none; }
+  .table caption {
+    color: #fff; }
+  .table thead {
+    color: #fff; }
+  .table.red caption, .table.red thead {
+    background: #B8312F; }
+  .table.orange caption, .table.orange thead {
+    background: #FBA026; }
+  .table.green caption, .table.green thead {
+    background: #41A85F; }
+  .table.blue caption, .table.blue thead {
+    background: #2C82C9; }
+  .table.white caption, .table.white thead {
+    background: #fff; }
+
+table.table {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 0.9em;
+  max-width: 100%;
+  overflow: hidden; }
+  table.table caption {
+    background: #fff;
+    border-right: 1px solid #b7b7b7;
+    border-left: 1px solid #b7b7b7;
+    border-top: 1px solid #b7b7b7;
+    padding: 5px; }
+  table.table td {
+    padding: 5px 10px 5px 10px;
+    white-space: nowrap; }
+  table.table tbody td:first-child {
+    border-left: 1px solid #b7b7b7; }
+  table.table tbody td:last-child {
+    border-right: 1px solid #b7b7b7; }
+  table.table tbody td {
+    border-top: 1px solid #b7b7b7;
+    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
+    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
+    box-shadow: inset 0px 1px 0px 0px #ffffff; }
+  table.table tbody tr {
+    height: 2rem; }
+    table.table tbody tr:nth-of-type(2n) {
+      background: #f8f8f8; }
+    table.table tbody tr:nth-of-type(2n+1) {
+      background: #fff; }
+    table.table tbody tr:hover {
+      background: #f0f0f0; }
+  table.table tbody tr:last-child td {
+    border-bottom: 1px solid #b7b7b7; }
+  table.table thead {
+    background: #fff; }
+    table.table thead td:first-child {
+      border-left: 1px solid #b7b7b7; }
+    table.table thead td:last-child {
+      border-right: 1px solid #b7b7b7; }
+  table.table .empty {
+    text-align: center;
+    color: #d8d8d8; }
+  table.table tfoot {
+    border: none; }
+    table.table tfoot label {
+      float: left; }
+    table.table tfoot select {
+      width: auto;
+      float: right;
+      margin: 0;
+      min-width: 0px; }
+    table.table tfoot td {
+      text-align: center;
+      padding-top: 10px; }
+
+table.list th {
+  text-align: left; }
+table.list td {
+  padding: 2px 5px 2px 5px; }
+
+@media screen and (max-width: 600px) {
+  table.table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border: 0; }
+    table.table thead {
+      display: none; }
+    table.table tbody tr {
+      height: auto;
+      display: block;
+      margin-bottom: .625em; }
+      table.table tbody tr td:last-child {
+        border-bottom: 1px solid #b7b7b7; }
+      table.table tbody tr:last-child td {
+        border-bottom: none; }
+        table.table tbody tr:last-child td:last-child {
+          border-bottom: 1px solid #b7b7b7; }
+    table.table tbody td {
+      border-left: 1px solid #b7b7b7;
+      border-right: 1px solid #b7b7b7;
+      display: block;
+      font-size: .8rem;
+      text-align: right;
+      position: relative;
+      height: 2rem;
+      line-height: 2rem;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 100%; }
+      table.table tbody td:before {
+        content: attr(data-label);
+        float: left;
+        margin-right: 10px;
+        font-weight: bold; }
+    table.table tfoot {
+      display: none; } }
+.nobreak {
+  white-space: nowrap; }
+
+/*# sourceMappingURL=table.css.map */
diff --git a/table.scss b/table.scss
index 198da1d..088e698 100644
--- a/table.scss
+++ b/table.scss
@@ -45,7 +45,8 @@ table.table {
     @include box-sizing(border-box);
     width: 100%;
     font-size: 0.9em;
-    display: table;
+    max-width: 100%;
+    overflow: hidden;
 
     caption {
         background: #fff;
@@ -91,10 +92,6 @@ table.table {
             }
         }
 
-        a {
-            display: block;
-        }
-
         tr:last-child td {
             border-bottom: 1px solid $content-border-color;
         }
@@ -150,8 +147,10 @@ table.list {
 
 @media screen and (max-width: 600px) {
     table.table {
-        border: 0;
+        display: table;
+        table-layout: fixed;
         width: 100%;
+        border: 0;
 
         thead {
             display: none;
@@ -163,6 +162,10 @@ table.list {
                 display: block;
                 margin-bottom: .625em;
 
+                td:last-child {
+                    border-bottom: 1px solid $content-border-color;
+                }
+
                 &:last-child td {
                     border-bottom: none;
 
@@ -181,19 +184,24 @@ table.list {
                 position: relative;
                 height: 2rem;
                 line-height: 2rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                max-width: 100%;
 
                 &:before {
                     content: attr(data-label);
-                    position: absolute;
-                    left: 0;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    margin-left: 20px;
+                    float: left;
+                    margin-right: 10px;
                     font-weight: bold;
-                    display: inline-block;
                 }
             }
         }
+
+        tfoot {
+            // if not hidden colspan will cause problems and reduce width based on cospan value
+            // 1/cospan_val
+            display: none;
+        }
     }
 }