Skip to content
GitLab
Commit cd466f1d authored by Mark Otto's avatar Mark Otto
Browse files

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

parent 27845e44
7 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible,!42132.1.0 wip,!4165Patch 2
Hide whitespace changes
Inline Side-by-side
Showing
with 83 additions and 1 deletion
+83 -1
docs/assets/css/bootstrap.css
+ 7
- 0
View file @ cd466f1d
......@@ -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;
......
less/tables.less
+ 9
- 1
View file @ cd466f1d
......@@ -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); }
......
less/tests/css-tests.html
+ 67
- 0
View file @ cd466f1d
......@@ -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
================================================== -->
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment