rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

Improve responsive table docs

Browse Source 
- Splits the examples with code snippets
- Adds note about possible broken visuals

Closes #25813
This commit is contained in:
Mark Otto 2018-07-15 22:51:47 -07:00 committed by Mark Otto
parent eb81c39f2c
commit 28b9bc068f
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
site/docs/4.1/content/tables.md
View File

@ -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. 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" %} {% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
<div class="bd-example">
<div class="table-responsive{{ bp.abbr }}"> <div class="table-responsive{{ bp.abbr }}">
<table class="table"> <table class="table">
<thead> <thead>
@ -818,15 +820,12 @@ Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables u
</tbody> </tbody>
</table> </table>
</div> </div>
{% endunless %}{% endfor %}
</div> </div>
{% highlight html %} {% highlight html %}
{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
<div class="table-responsive{{ bp.abbr }}"> <div class="table-responsive{{ bp.abbr }}">
<table class="table"> <table class="table">
... ...
</table> </table>
</div> </div>
{% endunless %}{% endfor %}
{% endhighlight %} {% endhighlight %}
{% endunless %}{% endfor %}