Tables CSS

This is a demonstration of the CSS used to style tables.

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

# First Name Last Name Username
Primary Mark Otto @mdo
Success Jacob Thornton @fat
Warning Larry the Bird @twitter
Danger Mark Otto @mdo
Info Jacob Thornton @fat
Default Jacob Thornton @fat
Selected Bob Bobson @bob

Small table with row hover effect

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

# First Name Last Name Username
Primary Mark Otto @mdo
Success Jacob Thornton @fat
Warning Larry the Bird @twitter
Danger Mark Otto @mdo
Info Jacob Thornton @fat
Default Larry the Bird @twitter
Selected Bob Bobson @bob

Row boxes

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

Column 1 Column 2 Column 3
Row 1, Column 1 Row 1 Column 2 Row 1, Column 3
Row 2, Column 1 Row 2 Column 2 Row 2, Column 3
Row 3, Column 1 Row 3 Column 2 Row 3, Column 3

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.

# Table heading Table heading Table heading Table heading Table heading Table 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

Scrollable tables

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

CAPID Description SMR Service Tyres Brakes Others Insight Insight Var. Insight Var. Front Tyre Rear Tyre Derwent Code Tyres Brakes Others Insight Insight Var. Insight Var.
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212
72816 Audi A3 Diesel Hatchback 1.6 TDI 110 Sport 3dr [Nav] 16 1,579 628 544 271 136 1,791 -12% -212 225/45R17W 225/45R17W 1279686 544 271 136 1,791 -12% -212

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.

Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Item 1
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Item 2
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Item 3
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6

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):

cap ID Dates
Toggle
Toggle
2017 -
2017 -
2017 -
2017 -

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:

Header column
Not indented
Indented with level-1
Indented with level-2
Indented with level-3

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):

Header column
Audi
A1
Generation 1
A4
Generation 4
Generation 5

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):

Total Date
€3,543,211 2017/04/02
£21,101,112 2017/04/06
$124,211 2017/04/07