Skip to content

Commit

Permalink
Drop .table-reflow
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
mdo committed Jan 3, 2017
1 parent f1229e8 commit bd72b95
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 102 deletions.
58 changes: 0 additions & 58 deletions docs/content/tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
1 change: 0 additions & 1 deletion docs/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down
43 changes: 0 additions & 43 deletions scss/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

3 comments on commit bd72b95

@Quix0r
Copy link

@Quix0r Quix0r commented on bd72b95 Jun 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sad to see this go. 😢 Sure I can understand that you put a lot effort in to bring this back (and fully working). Any known workarounds? .table-responsive is no really responsive as you still have a horizontal scrollbar.

@tyrex1975
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

A perfect example of reflow is a weekly calendar, made up of 7 daily columns, which reflows to 7 daily rows when the screen width is reduced. Doing this with .table-responsive is messy.

@Quix0r
Copy link

@Quix0r Quix0r commented on bd72b95 Mar 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or a simple data table with many columns. On a decent 16:9 you have e.g. full table while on a small 4:3 you have reflow (or priors?).

Please sign in to comment.