fixes twbs#9786: enable tables in panels

components.html

@@ -2779,6 +2779,117 @@ <h3 class="panel-title">Panel title</h3>
 <div class="panel panel-danger">...</div>
 {% endhighlight %}
 
+    <h3 id="panels-tables">With tables</h3>
+    <p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
+    <div class="bs-example">
+      <div class="panel">
+        <!-- Default panel contents -->
+        <div class="panel-heading">Panel heading</div>
+        <div class="panel-body">
+          <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+        </div>
+
+        <!-- Table -->
+        <table class="table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>First Name</th>
+              <th>Last Name</th>
+              <th>Username</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Mark</td>
+              <td>Otto</td>
+              <td>@mdo</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Jacob</td>
+              <td>Thornton</td>
+              <td>@fat</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>Larry</td>
+              <td>the Bird</td>
+              <td>@twitter</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+{% highlight html %}
+<div class="panel">
+  <!-- Default panel contents -->
+  <div class="panel-heading">Panel heading</div>
+  <div class="panel-body">
+    <p>...</p>
+  </div>
+
+  <!-- Table -->
+  <table class="table">
+    ...
+  </table>
+</div>
+{% endhighlight %}
+
+    <p>If there is no panel body, the component moves from panel header to table without interruption.</p>
+    <div class="bs-example">
+      <div class="panel">
+        <!-- Default panel contents -->
+        <div class="panel-heading">Panel heading</div>
+
+        <!-- Table -->
+        <table class="table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>First Name</th>
+              <th>Last Name</th>
+              <th>Username</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Mark</td>
+              <td>Otto</td>
+              <td>@mdo</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Jacob</td>
+              <td>Thornton</td>
+              <td>@fat</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>Larry</td>
+              <td>the Bird</td>
+              <td>@twitter</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+{% highlight html %}
+<div class="panel">
+  <!-- Default panel contents -->
+  <div class="panel-heading">Panel heading</div>
+
+  <!-- Table -->
+  <table class="table">
+    ...
+  </table>
+</div>
+{% endhighlight %}
+
+
+
     <h3 id="panels-list-group">With list groups</h3>
     <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
     <div class="bs-example">

dist/css/bootstrap.css

@@ -5231,6 +5231,10 @@ a.list-group-item:focus {
   clear: both;
 }
 
+.panel > .table {
+  margin-bottom: 0;
+}
+
 .panel > .list-group {
   margin-bottom: 0;
 }
@@ -5252,6 +5256,14 @@ a.list-group-item:focus {
   border-top-width: 0;
 }
 
+.panel > .table {
+  margin-bottom: 0;
+}
+
+.panel > .panel-body + .table {
+  border-top: 1px solid #dddddd;
+}
+
 .panel-heading {
   padding: 10px 15px;
   background-color: #f5f5f5;

less/panels.less

@@ -18,12 +18,16 @@
   .clearfix();
 }
 
+
 // List groups in panels
 //
 // By default, space out list group content from panel headings to account for
 // any kind of custom content between the two.
 
 .panel {
+  > .table {
+    margin-bottom: 0;
+  }
   > .list-group {
     margin-bottom: 0;
 
@@ -48,6 +52,22 @@
   }
 }
 
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+  > .table {
+    margin-bottom: 0;
+  }
+  > .panel-body + .table {
+    border-top: 1px solid @table-border-color;
+  }
+}
+
+
 // Optional heading
 .panel-heading {
   padding: 10px 15px;