Drop .table-reflow

Tried redoing this in flexbox, but it falls apart really quickly. Any changes in height of the cells throws it all off since the rows become columns (and thus, content across columns cannot be equally sized). Rather than implement something with such glaring flaws, I'm nuking it outright.

diff --git a/docs/content/tables.md b/docs/content/tables.md
index 4b4e75028c835c78073ec0b793d044f846b479d4..234c2ec880a73e7d3243921ef8a4292fc7323954 100644 (file)
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -769,61 +769,3 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
   ...
 </table>
 {% endhighlight %}
-
-
-### Reflow
-Turn traditional tables on their side by using `table-reflow`. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc.
-
-{% callout warning %}
-#### Content order and complex tables
-
-Beware that the `table-reflow` style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don't use this for layout tables) with appropriate `<th>` table header cells for each row and column.
-
-In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using `rowspan` or `colspan` attributes).
-
-{% endcallout %}
-
-{% 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>
-      <th scope="row">1</th>
-      <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>
-      <th scope="row">2</th>
-      <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>
-      <th scope="row">3</th>
-      <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 %}

diff --git a/docs/migration.md b/docs/migration.md
index c8c39c03b23de7d253514e9ed5117a0877330a9c..ee3ecb125f94424de32c02f34d2b3e4016cce9c6 100644 (file)
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -82,7 +82,6 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 - Responsive tables no longer require a wrapping element. Instead, just put the `.table-responsive` right on the `<table>`.
 - Renamed `.table-condensed` to `.table-sm` for consistency.
 - Added a new `.table-inverse` option.
-- Added a new `.table-reflow` option.
 - Added table header modifiers: `.thead-default` and `.thead-inverse`.
 - Renamed contextual classes to have a `.table-`-prefix. Hence `.active`, `.success`, `.warning`, `.danger` and `.table-info` to `.table-active`, `.table-success`, `.table-warning`, `.table-danger` and `.table-info`.
 

diff --git a/scss/_tables.scss b/scss/_tables.scss
index e6894cfedf16e9659c3921845ddf9e3bc0796b33..47be2c508474848260aea0850105898310db31e0 100644 (file)
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -151,46 +151,3 @@
     border: 0;
   }
 }
-
-
-.table-reflow {
-  thead {
-    float: left;
-  }
-
-  tbody {
-    display: block;
-    white-space: nowrap;
-  }
-
-  th,
-  td {
-    border-top: $table-border-width solid $table-border-color;
-    border-left: $table-border-width solid $table-border-color;
-
-    &:last-child {
-      border-right: $table-border-width solid $table-border-color;
-    }
-  }
-
-  thead,
-  tbody,
-  tfoot {
-    &:last-child {
-      tr:last-child th,
-      tr:last-child td {
-        border-bottom: $table-border-width solid $table-border-color;
-      }
-    }
-  }
-
-  tr {
-    float: left;
-
-    th,
-    td {
-      display: block !important;
-      border: $table-border-width solid $table-border-color;
-    }
-  }
-}