root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Generate series of `.table-responsive-*` classes to accomodate overflowing tables in a variety of screen sizes

This commit is contained in:
Patrick Yeo 2017-06-08 17:58:31 -07:00 committed by Mark Otto
parent f7eb3c98b2
commit f66fa3fa2b
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_tables.scss
View File

@ -153,20 +153,26 @@
// Responsive tables // Responsive tables
// //
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by // Generate series of `.table-responsive-*` classes for configuring the screen
// enabling horizontal scrolling. Only applies <768px. Everything above that // size of where your table will overflow.
// will display normally.
.table-responsive { .table-responsive {
@include media-breakpoint-down(md) { @each $breakpoint in map-keys($grid-breakpoints) {
display: block; $next: breakpoint-next($breakpoint, $grid-breakpoints);
width: 100%; $infix: breakpoint-infix($next, $grid-breakpoints);
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;` &#{$infix} {
&.table-bordered { @include media-breakpoint-down($breakpoint) {
border: 0; display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;`
&.table-bordered {
border: 0;
}
}
} }
} }
} }