Tables
Responsive, lightweight and pretty.
It is imperative that tables are used for, and only for, tabular data with more than one dimension. Tables should be simple to parse and never be nested.
users
# | Name | Contact | Created | ||
---|---|---|---|---|---|
1 | Britney Spears | therealbritney@example.com | Ari Gold | 3 days ago | |
2 | Britney Spears | therealbritney@example.com | Ari Gold | 3 days ago | |
3 | Britney Spears | therealbritney@example.com | Ari Gold | 3 days ago | |
4 | Britney Spears | therealbritney@example.com | Ari Gold | 3 days ago | |
5 | Britney Spears | therealbritney@example.com | Ari Gold | 3 days ago | |
6 | Britney Spears | therealbritney@example.com | Ari Gold | 3 days ago |
Example markup for a slats table
<div class="table-responsive">
<table class="table table-slats table-cushion table-slats-lg">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="ellipsis">Britney Spears</td>
<td class="ellipsis">
<a href="mailto:therealbritney@example.com">therealbritney@example.com</a>
</td>
<td class="ellipsis">
<a href="https://en.wikipedia.org/wiki/Ari_Gold_(Entourage)">Ari Gold</a>
</td>
<td class="ellipsis">3 days ago</td>
<td>
<div class="text-right">
<a href="#!" class="btn btn-primary btn-xs">Ohai</a>
</div>
</td>
</tr>
<!-- -->
</tbody>
</table>
</div>
.panel.panel-default.table-responsive .table.table-striped
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Example markup for a table in a panel
<div class="panel panel-default table-responsive">
<div class="panel-heading">
Table
<div class="pull-right">
<a href="#" class="label label-primary">Action 1</a>
<a href="#" class="label label-default">Action 2</a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 py1">
<span class="small">Something Neat</span>
<span class="badge badge-default">12</span>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<table class="table table-striped">
<thead>
<!-- ... -->
</thead>
<tbody>
<!-- ... -->
</tbody>
</table>
</div>
Tables with buttons
Sometimes you need to add buttons to each row of the table. Make sure you
give the <td>
element the .text-right
class. Also, give each
link the .btn-sm
class so that it doesn’t make the <tr>
too tall.
Tables for data display
When it comes to displaying data, it’s important to let it speak for itself. As
such, the .data-table
ensures that design elements stay out of the way.
This table comes in handy for viewing numeric intensive data like usage statistics, or some other type of raw information. Typically, for data that doesn’t have a hierarchical significance or a reason to incorporate visual cues.
.table.table-data.table-cushion
# | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
It’s also important to wrap your table in .table-responsive
in order to allow
a horizontal scroll for mobile devices.