root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 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

14
scss/_tables.scss
View File

@ -153,12 +153,16 @@
// 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) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block; display: block;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
@ -170,3 +174,5 @@
} }
} }
} }
}
}