From 44447eeefe61dbb16cab59900c3c061d9f207fbc Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 24 Nov 2014 17:09:32 -0800
Subject: Give all embedded live docs examples data-example-id attrs

Refs #11410
---
 docs/_includes/css/tables.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'docs/_includes/css/tables.html')

diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html
index aba4a3af8..0b2e1b5fd 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&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</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>
@@ -135,7 +135,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>&lt;tbody&gt;</code>.</p>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="hoverable-table">
     <table class="table table-hover">
       <thead>
         <tr>
@@ -175,7 +175,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>
@@ -261,7 +261,7 @@
       </tbody>
     </table>
   </div>
-  <div class="bs-example">
+  <div class="bs-example" data-example-id="contextual-table">
     <table class="table">
       <thead>
         <tr>
@@ -365,7 +365,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>
-- 
cgit v1.2.3


From 511f37dc049e99256838894b311b8847dba2c1c5 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Tue, 30 Dec 2014 18:16:16 -0800
Subject: Document that responsive tables use `overflow-y: hidden`

Closes #15288

[skip sauce]
---
 docs/_includes/css/tables.html | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'docs/_includes/css/tables.html')

diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html
index c3021ee80..ac84e8158 100644
--- a/docs/_includes/css/tables.html
+++ b/docs/_includes/css/tables.html
@@ -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>
-- 
cgit v1.2.3