Responsive Tables
Add two simple classes to style your table and make it responsive.
Corresponds to
this ZenDesk Help Center article.
Table with nothing added
This is a table right out of the box, with no classes or styles added to it:
| Test Column 1 |
Test Column 2 |
Test Column 3 |
Test Column 4 |
Test Column 5 |
| Column 1, Item 1 |
Column 2, Item 1 |
Column 3, Item 1 |
Column 4, Item 1 |
Column 5, Item 1 |
| Column 1, Item 2 |
Column 2, Item 2 |
Column 3, Item 2 |
Column 4, Item 2 |
Column 5, Item 2 |
Table with just the "table" class added
Adds nice padding automatically:
| Test Column 1 |
Test Column 2 |
Test Column 3 |
Test Column 4 |
Test Column 5 |
| Column 1, Item 1 |
Column 2, Item 1 |
Column 3, Item 1 |
Column 4, Item 1 |
Column 5, Item 1 |
| Column 1, Item 2 |
Column 2, Item 2 |
Column 3, Item 2 |
Column 4, Item 2 |
Column 5, Item 2 |
Table with "table" class and wrapped with "table-responsive" class
Along with the padding, it will scroll in mobile view, so nothing is lost. Resize your browser window, or use the web developer "responsive" view to see the scrolling capability:
| Test Column 1 |
Test Column 2 |
Test Column 3 |
Test Column 4 |
Test Column 5 |
| Column 1, Item 1 |
Column 2, Item 1 |
Column 3, Item 1 |
Column 4, Item 1 |
Column 5, Item 1 |
| Column 1, Item 2 |
Column 2, Item 2 |
Column 3, Item 2 |
Column 4, Item 2 |
Column 5, Item 2 |
