add tests for table grid sizing, solve bugs in fluid table grid sizing

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 88db0c044422a11d30ebe45940a807c10d6d94a2..ab0a0731a1ab3358e2b2886674e436a74d4b7a0a 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1753,6 +1753,13 @@ table {
   background-color: #f5f5f5;
 }
 
+table [class*=span],
+.row-fluid table [class*=span] {
+  display: table-cell;
+  float: none;
+  margin-left: 0;
+}
+
 table .span1 {
   float: none;
   width: 44px;

diff --git a/less/tables.less b/less/tables.less
index 8bd563a062e6b45cdc540e8a9e3c1f60e5516712..ecd92233db0546570221cc9cf7737c2fe2422cfd 100644 (file)
--- a/less/tables.less
+++ b/less/tables.less
@@ -147,7 +147,15 @@ table {
 // TABLE CELL SIZING
 // -----------------
 
-// Change the columns
+// Reset default grid behavior
+table [class*=span],
+.row-fluid table [class*=span] {
+  display: table-cell;
+  float: none; // undo default grid column styles
+  margin-left: 0; // undo default grid column styles
+}
+
+// Change the column widths to account for td/th padding
 table {
   .span1     { .tableColumns(1); }
   .span2     { .tableColumns(2); }

diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 017aa84f18d9d6dd7e54b80187162d50e0d93695..a61f6923a77a67ccd2cb4a5a23ce52aca5ac2606 100644 (file)
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -458,6 +458,73 @@
 </div><!--/row-->
 
 
+<h4>Grid sizing</h4>
+<div class="row">
+  <div class="span12">
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th class="span3">1</th>
+          <th class="span4">2</th>
+          <th>3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="2">1 and 2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td rowspan="2">2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td rowspan="2">1</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td colspan="2">2 and 3</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div><!--/row-->
+
+<h4>Fluid grid sizing</h4>
+<div class="row-fluid">
+  <div class="span12">
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th class="span3">1</th>
+          <th class="span4">2</th>
+          <th>3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="2">1 and 2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td rowspan="2">2</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td rowspan="2">1</td>
+          <td>3</td>
+        </tr>
+        <tr>
+          <td colspan="2">2 and 3</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div><!--/row-->
+
+
 
 <!-- Forms
 ================================================== -->