Tables

We deal with lots of tabular data, so having a comprehensive set of table styles can make an app really easy to use.

Default table with row states

Small table with row hover effect

For smaller tables add the table-condensed, and for a hover effect add the table-hover class.

Row boxes

You can encase a table row in a box to give it more prominence using the row-boxed CSS class.

Responsive tables

If you have wide tables that need to be scrollable on smaller screens (mobile devices, for instance) you can add the table-responsive class to the container element.

Scrollable tables

It's possible to fix headers and on or more columns in order to create a scrollable table like this:

Note: although the code above shows class="fixed-header" and class="fixed-cell" on elements you do not have to add these yourself. They are shown because of a quirk with the code demo system.

There are a few things to do to make this work. Firstly create a container element around your table with a defined height; this will be the scrollable element: <div class="scrollable" style="max-height:500px"> (the height can be set in a separate CSS file or <style> block).

Secondly you need to tell the table how many columns you want to fix on the left hand side. You do this with a data attribute: <table class="table" data-fixed-columns="2">. This tells the table to keep the first two columns fixed in the view at all times.

Thirdly you need to include the JavaScript that makes this work. The minified version for production is here:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/js/tables.min.js"></script>

And the full version for development is here:

<script src="https://bootstrap.cap-hpi.com/v2.0.0/scripts/tables.js"></script>

Tables with row group headers

Useful when displaying complex data which has a primary piece of information (such as a derivative name and code), with secondary information shown on subsequent rows.

Nested tables

You may need to display nested data in a table, for example brand > model > trim > derivative rows. Because nesting actual <table> elements inside each other gets very messy very quickly, there are some CSS classes you can apply to give the impression of nesting. Here's a simple example (with a couple of rows styled with the row-boxed class):

To make this work you need to give the table a class of table-nested:

<table class="table table-nested">

Then each nested row you need to give a class of row-nested:

<tr class="row-nested">

You can then specify the level of indentation for the column you want to look nested. There are three indentation levels: level-1, level-2 and level-3. Apply them to the cell in each row you want to be indented:

If you want the user to be able to trigger showing/hiding of the nested rows you should add elements (buttons or links) to allow them to do that, and wire up some JavaScript to make it work. If there isn't a lot of data then it may be more efficient to render all the rows and hide the ones that need to be hidden with CSS. Here's a quick example of that (with some dirty, hacky JavaScript that doesn't work properly, but you get the idea):

Setting the width of table columns

You may want to set the width of different table columns. For this you can use the grid system classes such as .col-xs-4 which gives you a 12 column grid to use. You apply these in a <colgroup> element which is the first child of the <table> element, like this:

<colgroup>
    <col class="col-xs-1">
    <col class="col-xs-7">
    <col class="col-xs-2">
    <col class="col-xs-2">
</colgroup>

Assuming there are 4 columns in your table this will set the first column to be one twelfth of the total width, the second column to be seven twelfths, and the last two columns to both be two twelfths. Here's the whole thing in action (this table contains checkboxes, so we also need to include the forms CSS file):