1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

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 1239 additions and 1081 deletions

1093
dist/css/bootstrap.css vendored

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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;
}
}
}