Fork me on GitHub

Required files

SCSS files required: _components.tables.scss

Default table

Use default table tags to create a fluid table

A wrapper can be added to create an overflow scroll on the table, making it more responsive on smaller devices.responsive-table-wrapper

The example below has the modifying class .table--hover also added to illustrate an optional hover effect

Site # of Chargers Energy Used CO2 Saved
3743 CH 1 45.50kWh 25.48kg
6681PN 1 0.00kWh 0.00kg
6852 MC 1 0.00kWh 0.00kg

Striped table

Add the modifying class .table--striped to make the table striped

Site # of Chargers Energy Used CO2 Saved
3743 CH 1 45.50kWh 25.48kg
6681PN 1 0.00kWh 0.00kg
6852 MC 1 0.00kWh 0.00kg

Condensed table

Add the modifying class .table--condensed to make the table condensed

The example below has the class .font-size-sm also added to illustrate when you may use a condensed table

Site # of Chargers Energy Used CO2 Saved
3743 CH 1 45.50kWh 25.48kg
6681PN 1 0.00kWh 0.00kg
6852 MC 1 0.00kWh 0.00kg

Bordered table

Add the modifying class .table--bordered to make the table bordered

Site # of Chargers Energy Used CO2 Saved
3743 CH 1 45.50kWh 25.48kg
6681PN 1 0.00kWh 0.00kg
6852 MC 1 0.00kWh 0.00kg

Bordered inbetween table

Add the modifying class .table--bordered-inbetween to make the table bordered inbetween rows and columns

Site # of Chargers Energy Used CO2 Saved
3743 CH 1 45.50kWh 25.48kg
6681PN 1 0.00kWh 0.00kg
6852 MC 1 0.00kWh 0.00kg