fuck around with responsive reflow table idea

docs/components/tables.md

@@ -542,3 +542,51 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
   </table>
 </div>
 {% endhighlight %}
+
+
+### Reflow
+
+{% example html %}
+<table class="table table-reflow">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}

less/_tables.less

@@ -43,25 +43,25 @@ th {
     border-bottom: 2px solid @table-border-color;
   }
   // Remove top border from thead by default
-  > caption + thead,
-  > colgroup + thead,
-  > thead:first-child {
-    > tr:first-child {
-      > th,
-      > td {
-        border-top: 0;
-      }
-    }
-  }
+//  > caption + thead,
+//  > colgroup + thead,
+//  > thead:first-child {
+//    > tr:first-child {
+//      > th,
+//      > td {
+//        border-top: 0;
+//      }
+//    }
+//  }
   // Account for multiple tbody instances
   > tbody + tbody {
     border-top: 2px solid @table-border-color;
   }
 
   // Nesting
-  .table {
-    background-color: @body-bg;
-  }
+//  .table {
+//    background-color: @body-bg;
+//  }
 }
 
 
@@ -264,3 +264,55 @@ table {
     }
   }
 }
+
+
+.table-reflow {
+
+  thead {
+    float: left;
+  }
+
+  tbody {
+    display: block;
+    white-space: nowrap;
+  }
+
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        border-top: 1px solid @table-border-color;
+        border-left: 1px solid @table-border-color;
+
+        &:last-child {
+          border-right: 1px solid @table-border-color;
+        }
+      }
+    }
+
+    &:last-child {
+      > tr:last-child {
+        > th,
+        > td {
+          border-bottom: 1px solid @table-border-color;
+        }
+      }
+    }
+  }
+
+  border-right: ;
+  border-bottom: ;
+
+
+  tr {
+    float: left;
+
+    th,
+    td {
+      display: block !important;
+      border: 1px solid @table-border-color;
+    }
+  }
+}