From cd466f1d0b51c5165f7b615c671ee94d53f48eeb Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Mon, 25 Jun 2012 14:37:35 -0700
Subject: [PATCH] add tests for table grid sizing, solve bugs in fluid table
grid sizing
---
docs/assets/css/bootstrap.css | 7 ++++
less/tables.less | 10 +++++-
less/tests/css-tests.html | 67 +++++++++++++++++++++++++++++++++++
3 files changed, 83 insertions(+), 1 deletion(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 88db0c0444..ab0a0731a1 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 8bd563a062..ecd92233db 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 017aa84f18..a61f6923a7 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
================================================== -->
--
GitLab