Table 1 Example:
Settings | Productivity | Totals |
---|---|---|
Totals | $ 49,000.00 | |
Table Data | Table Data | $ 10,000.00 |
Table Data | Table Data | $ 15,000.00 |
Table Data | Table Data | $ 24,000.00 |
Table 2 Example:
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Footer | Table Footer | Table Footer |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Table Data | Table Data | Table Data |
Style variation
You can add more styling to the table by using a combination of classes to improve the visual appearance of your table
Settings | Productivity | Totals |
---|---|---|
Totals | $ 49,000.00 | |
Table Data | Table Data | $ 10,000.00 |
Table Data | Table Data | $ 15,000.00 |
Table Data | Table Data | $ 24,000.00 |
Table sample 3
show code
Table in Accordion
Settings | Productivity | Totals |
---|---|---|
Totals | $ 49,000.00 | |
Table Data | Table Data | $ 10,000.00 |
Table Data | Table Data | $ 15,000.00 |
Table Data | Table Data | $ 24,000.00 |
Responsive Table Example
You can make the table stack each row on top of each other when view on mobile to help give it a cleaner look. All you need to do is include the uk-table-responsive class inside the table tag.
Settings | Productivity | Totals |
---|---|---|
Totals | $ 49,000.00 | |
Table Data | Table Data | $ 10,000.00 |
Table Data | Table Data | $ 15,000.00 |
Table Data | Table Data | $ 24,000.00 |