diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 88db0c044422a11d30ebe45940a807c10d6d94a2..ab0a0731a1ab3358e2b2886674e436a74d4b7a0a 100644 --- 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 --- 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 --- 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 ================================================== -->