From 5ab99abd97ecbfff2e7a44200bba912f60eef695 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 01:44:06 -0800 Subject: [PATCH 1/4] prevent double border on responsive .table-border --- scss/_tables.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/scss/_tables.scss b/scss/_tables.scss index 89b03e4b18..0d2492a0be 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -150,6 +150,11 @@ // // border: $table-border-width solid $table-border-color; // -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; + } } From 967ee175dc8aeee307dfb36d141cc321f37e53cc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 01:45:40 -0800 Subject: [PATCH 2/4] Move .table-responsive to .table instead of as a parent --- docs/content/tables.md | 272 ++++++++++++++++++++--------------------- 1 file changed, 132 insertions(+), 140 deletions(-) diff --git a/docs/content/tables.md b/docs/content/tables.md index b927f35d57..c1661e5326 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -442,52 +442,50 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. Use contextual classes to color table rows or individual cells. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
- .table-active - Applies the hover color to a particular row or cell
- .table-success - Indicates a successful or positive action
- .table-info - Indicates a neutral informative change or action
- .table-warning - Indicates a warning that might need attention
- .table-danger - Indicates a dangerous or potentially negative action
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescription
+ .table-active + Applies the hover color to a particular row or cell
+ .table-success + Indicates a successful or positive action
+ .table-info + Indicates a neutral informative change or action
+ .table-warning + Indicates a warning that might need attention
+ .table-danger + Indicates a dangerous or potentially negative action
@@ -670,7 +668,7 @@ Regular table background variants are not available with the inverse table, howe ## Responsive tables -Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. +Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. {% callout warning %} #### Vertical clipping/truncation @@ -693,103 +691,97 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co {% endcallout %}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
{% highlight html %} -
- - ... -
-
+ + ... +
{% endhighlight %} From 410b7dd5e86c4ca31261b66d78097a32fcc2df74 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 01:46:11 -0800 Subject: [PATCH 3/4] update comment --- scss/_tables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 0d2492a0be..38153b6341 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -136,8 +136,8 @@ // Responsive tables // -// Wrap your tables in `.table-responsive` and we'll make them mobile friendly -// by enabling horizontal scrolling. Only applies <768px. Everything above that +// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by +// enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. .table-responsive { From b88c32cf17a7976e12a4dc077389eb71d42df8ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 01:47:16 -0800 Subject: [PATCH 4/4] uncomment autohiding scroll and remove commented out border --- scss/_tables.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 38153b6341..3d8000045b 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -145,11 +145,7 @@ width: 100%; min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) overflow-x: auto; - - // TODO: find out if we need this still. - // - // border: $table-border-width solid $table-border-color; - // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 + -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 {