From 28b9bc068f502f01db1209b14133e492de0f7b8e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 15 Jul 2018 22:51:47 -0700
Subject: [PATCH] Improve responsive table docs
- Splits the examples with code snippets
- Adds note about possible broken visuals
Closes #25813
---
site/docs/4.1/content/tables.md | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/site/docs/4.1/content/tables.md b/site/docs/4.1/content/tables.md
index e3303666b3..8799d47f25 100644
--- a/site/docs/4.1/content/tables.md
+++ b/site/docs/4.1/content/tables.md
@@ -764,8 +764,10 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
-<div class="bd-example">
+**These tables may appear broken until their responsive styles apply at specific viewport widths.**
+
{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+<div class="bd-example">
<div class="table-responsive{{ bp.abbr }}">
<table class="table">
<thead>
@@ -818,15 +820,12 @@ Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables u
</tbody>
</table>
</div>
-{% endunless %}{% endfor %}
</div>
-
{% highlight html %}
-{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
<div class="table-responsive{{ bp.abbr }}">
<table class="table">
...
</table>
</div>
-{% endunless %}{% endfor %}
{% endhighlight %}
+{% endunless %}{% endfor %}
--
GitLab