Responsive Tables

We have included two Variations of responsive Tables. The one is the Bootstrap Default and also we have integrated the jQuery Plugin Stacktables which is also very awesome for responsive Tables. Decide what you like more if you need Tables for your Data.

2 different Variations of Responsive Tables
Many Options like Zebra, Bordered or Hover

Full responsive Joomla Tables
Lot of available Background Colors

Stacktable Plugin

Resize your Browser to see the effect of the different Tables, cause on larger Screens they look similar.

Number	First Name	Last Name	Username	Facebook
1	Mark	Otto	@mdo	Follow @mdo at Facebook
2	Jacob	Thornton	@fat	Follow @fat at Facebook
3	Larry	the Bird	@twitter	Follow @twitter at Facebook

You can see now that the Content for the Table has changed!

Bootstrap Tables

Number	First Name	Last Name	Username	Facebook
1	Mark	Otto	@mdo	Follow @mdo at Facebook
2	Jacob	Thornton	@fat	Follow @fat at Facebook
3	Larry	the Bird	@twitter	Follow @twitter at Facebook

You can now scroll horizontal through the Table.

Without Borders but Hovers

Number	First Name	Last Name	Username	Facebook
1	Mark	Otto	@mdo	Follow @mdo at Facebook
2	Jacob	Thornton	@fat	Follow @fat at Facebook
3	Larry	the Bird	@twitter	Follow @twitter at Facebook
4	Mark	Otto	@mdo	Follow @mdo at Facebook
5	Jacob	Thornton	@fat	Follow @fat at Facebook
6	Larry	the Bird	@twitter	Follow @twitter at Facebook

Background Colors

Number	First Name	Last Name	Username	Facebook
1	Mark	Otto	@mdo	Follow @mdo at Facebook
2	Jacob	Thornton	@fat	Follow @fat at Facebook
3	Larry	the Bird	@twitter	Follow @twitter at Facebook
4	Mark	Otto	@mdo	Follow @mdo at Facebook
5	Jacob	Thornton	@fat	Follow @fat at Facebook
6	Larry	the Bird	@twitter	Follow @twitter at Facebook
7	Mark	Otto	@mdo	Follow @mdo at Facebook
8	Jacob	Thornton	@fat	Follow @fat at Facebook
9	Larry	the Bird	@twitter	Follow @twitter at Facebook
10	Mark	Otto	@mdo	Follow @mdo at Facebook
11	Jacob	Thornton	@fat	Follow @fat at Facebook
12	Larry	the Bird	@twitter	Follow @twitter at Facebook

Shortcode

Please note that Tables are done with simple HTML Markup or with a Editor.

Stacktable Plugin Markup

<table class="table table-responsive">
  ...
</table>

Bootstrap Markup

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

For Bootstrap there are also a few Helper Classes where can be mixed together:

table-bordered: Makes a Border around the Table
table-hover: Hover on Mouse Effect
table-striped: Makes a Zebra Table

Responsive Tables