fuck around with responsive reflow table idea

This commit is contained in:
Mark Otto 2014-08-05 17:45:24 -07:00
parent 668dc448a7
commit d4e58c755e
8 changed files with 1237 additions and 1079 deletions

1093
dist/css/bootstrap.css vendored

File diff suppressed because it is too large Load diff

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -542,3 +542,51 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
</table>
</div>
{% endhighlight %}
### Reflow
{% example html %}
<table class="table table-reflow">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
{% endexample %}

File diff suppressed because it is too large Load diff

Binary file not shown.

File diff suppressed because one or more lines are too long

View file

@ -43,25 +43,25 @@ th {
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// > caption + thead,
// > colgroup + thead,
// > thead:first-child {
// > tr:first-child {
// > th,
// > td {
// border-top: 0;
// }
// }
// }
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
// .table {
// background-color: @body-bg;
// }
}
@ -264,3 +264,55 @@ table {
}
}
}
.table-reflow {
thead {
float: left;
}
tbody {
display: block;
white-space: nowrap;
}
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border-top: 1px solid @table-border-color;
border-left: 1px solid @table-border-color;
&:last-child {
border-right: 1px solid @table-border-color;
}
}
}
&:last-child {
> tr:last-child {
> th,
> td {
border-bottom: 1px solid @table-border-color;
}
}
}
}
border-right: ;
border-bottom: ;
tr {
float: left;
th,
td {
display: block !important;
border: 1px solid @table-border-color;
}
}
}