diff options
Diffstat (limited to 'docs/_includes/css/tables.html')
| -rw-r--r-- | docs/_includes/css/tables.html | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html index cf70b651a..ac84e8158 100644 --- a/docs/_includes/css/tables.html +++ b/docs/_includes/css/tables.html @@ -3,7 +3,7 @@ <h2 id="tables-example">Basic example</h2> <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="simple-table"> <table class="table"> <caption>Optional table caption.</caption> <thead> @@ -49,7 +49,7 @@ <h4>Cross-browser compatibility</h4> <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p> </div> - <div class="bs-example"> + <div class="bs-example" data-example-id="striped-table"> <table class="table table-striped"> <thead> <tr> @@ -90,7 +90,7 @@ <h2 id="tables-bordered">Bordered table</h2> <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="bordered-table"> <table class="table table-bordered"> <thead> <tr> @@ -131,7 +131,7 @@ <h2 id="tables-hover-rows">Hover rows</h2> <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="hoverable-table"> <table class="table table-hover"> <thead> <tr> @@ -172,7 +172,7 @@ <h2 id="tables-condensed">Condensed table</h2> <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="condensed-table"> <table class="table table-condensed"> <thead> <tr> @@ -258,7 +258,7 @@ </tbody> </table> </div> - <div class="bs-example"> + <div class="bs-example" data-example-id="contextual-table"> <table class="table"> <thead> <tr> @@ -351,6 +351,10 @@ <h2 id="tables-responsive">Responsive tables</h2> <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> 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.</p> + <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow"> + <h4>Vertical clipping/truncation</h4> + <p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p> + </div> <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset"> <h4>Firefox and fieldsets</h4> <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p> @@ -362,7 +366,7 @@ <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p> </div> - <div class="bs-example"> + <div class="bs-example" data-example-id="simple-responsive-table"> <div class="table-responsive"> <table class="table"> <thead> |