Permalink
Fetching contributors…
Cannot retrieve contributors at this time
182 lines (163 sloc) 5.22 KB

Tables

Basic

Tables carry some very simple styles just to make them feel consistent, they have a width of 100% so they fill their parent element.

Name Type Created by Created at Cost
Some Thing Foo by Bilbo Baggins 23 minutes ago £100.00
Another Thing Bar by Frodo Baggins 1 hour ago £99.00
Summit Else Wiz by Gandalf 01/01/2017 08:23 AM £50.00
Total £249.00
<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Created by</th>
        <th class="text-right">Created at</th>
        <th class="text-right">Cost</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="nowrap"><a href="#">Some Thing</a></td>
        <td>Foo</td>
        <td class="nowrap">by Bilbo Baggins</td>
        <td class="nowrap text-right">23 minutes ago</td>
        <td class="text-right">£100.00</td>
    </tr>
    <tr>
        <td class="nowrap"><a href="#">Another Thing</a></td>
        <td>Bar</td>
        <td class="nowrap">by Frodo Baggins</td>
        <td class="nowrap text-right">1 hour ago</td>
        <td class="text-right">£99.00</td>
    </tr>
    <tr>
        <td class="nowrap"><a href="#">Summit Else</a></td>
        <td>Wiz</td>
        <td class="nowrap">by Gandalf</td>
        <td class="nowrap text-right">01/01/2017 08:23 AM</td>
        <td class="text-right">£50.00</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>Total</td>
        <td></td>
        <td></td>
        <td class="text-right"></td>
        <td class="text-right">£249.00</td>
    </tr>
    </tfoot>
</table>

Styling

There are several additional classes that can be applied to tables:

  • table-bordered apply a border to the table
  • table-hover highlight row on hover
  • table-striped alternating row background colors
  • table-headed add background color to the header

All colors are defined in :ref:`variables`. Example with all additional classes:

Name Type Created by Created at Cost
Some Thing Foo by Bilbo Baggins 23 minutes ago £100.00
Another Thing Bar by Frodo Baggins 1 hour ago £99.00
Summit Else Wiz by Gandalf 01/01/2017 08:23 AM £50.00
Total £249.00
<table class="table-headed table-bordered table-striped table-hover">
    ...
</table>

Responsive

Tables dont work well on smaller screens, one way of fixing this is to wrap the table in a div with auto scrolling. This will enable the table to take up as much space as needed and enable you to scroll left and right.

<div class="scroll-x"><table>...</table></div>

Check out the above table at a smaller screen resolution. The class nowrap was deliberately added to force it wider.