Jonathan Smith

Responsive Tables

Resize the browser window to see the responive tables in action!

Horizontal Tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px)

Country Population (1000s) Adults (1000s) Share of world population (%) Wealth per capita Share of world wealth (%) GDP per capita Share of world GDP (%) Wealth Gini
World 6085576 3697511 100.00 26416 100.00 7675 100.00 0.804
 United States 284154 202865 4.67 143727 25.40 35619 21.67 0.801
 Japan 127034 100933 2.09 124858 9.86 25924 7.05 0.547
 China 1251788 842063 20.57 11267 8.77 3844 10.30 0.550
 United Kingdom 58670 43871 0.96 128959 4.71 24252 3.09 0.697
 Germany 82344 64810 1.35 90768 4.65 23917 4.22 0.667
 Italy 57715 46416 0.95 120897 4.34 22876 2.83 0.609
 India 1021084 570595 16.78 6513 4.14 2684 5.87 0.669
 France 59278 44358 0.97 94557 3.49 23614 3.00 0.730
 Spain 40717 32165 0.67 93086 2.36 19037 1.66 0.570
 Brazil 173858 104213 2.86 19676 2.13 7745 2.88 0.784
 Canada 30689 22764 0.50 89252 1.70 28731 1.89 0.688
List of countries by distribution wealth

Flip Scroll

Wrap your .table in .table-flipscroll to push headers on the right and making them fixed while scrolling the body

Country Population (1000s) Adults (1000s) Share of world population (%) Wealth per capita Share of world wealth (%) GDP per capita Share of world GDP (%) Wealth Gini
World 6085576 3697511 100.00 26416 100.00 7675 100.00 0.804
 United States 284154 202865 4.67 143727 25.40 35619 21.67 0.801
 Japan 127034 100933 2.09 124858 9.86 25924 7.05 0.547
 China 1251788 842063 20.57 11267 8.77 3844 10.30 0.550
 United Kingdom 58670 43871 0.96 128959 4.71 24252 3.09 0.697
 Germany 82344 64810 1.35 90768 4.65 23917 4.22 0.667
 Italy 57715 46416 0.95 120897 4.34 22876 2.83 0.609
 India 1021084 570595 16.78 6513 4.14 2684 5.87 0.669
 France 59278 44358 0.97 94557 3.49 23614 3.00 0.730
 Spain 40717 32165 0.67 93086 2.36 19037 1.66 0.570
 Brazil 173858 104213 2.86 19676 2.13 7745 2.88 0.784
 Canada 30689 22764 0.50 89252 1.70 28731 1.89 0.688
List of countries by distribution wealth

Vertical Tables

Wrap your .table in a .table-vertical for a vertial layout. Note that all your tr must carry a data-title for this to work

Country Population (1000s) Adults (1000s) Share of world population (%) Wealth per capita Share of world wealth (%) GDP per capita Share of world GDP (%) Wealth Gini
World 6085576 3697511 100.00 26416 100.00 7675 100.00 0.804
 United States 284154 202865 4.67 143727 25.40 35619 21.67 0.801
 Japan 127034 100933 2.09 124858 9.86 25924 7.05 0.547
 China 1251788 842063 20.57 11267 8.77 3844 10.30 0.550
 United Kingdom 58670 43871 0.96 128959 4.71 24252 3.09 0.697
 Germany 82344 64810 1.35 90768 4.65 23917 4.22 0.667
 Italy 57715 46416 0.95 120897 4.34 22876 2.83 0.609
 India 1021084 570595 16.78 6513 4.14 2684 5.87 0.669
 France 59278 44358 0.97 94557 3.49 23614 3.00 0.730
 Spain 40717 32165 0.67 93086 2.36 19037 1.66 0.570
 Brazil 173858 104213 2.86 19676 2.13 7745 2.88 0.784
 Canada 30689 22764 0.50 89252 1.70 28731 1.89 0.688
List of countries by distribution wealth
                        <div class="table-vertical">
                        <table class="table table-striped">
                        <thead>
                        <tr>
                        <th style="padding-right:100px">Country</th>
                        <th>Population (1000s)</th>
                        <th>Adults (1000s)</th>
                        <th>Share of world population (%)</th>
                        <th>Wealth per capita</th>
                        <th>Share of world wealth (%)</th>
                        <th>GDP per capita</th>
                        <th>Share of world GDP (%)</th>
                        <th>Wealth Gini</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                        <td align="left" data-title="Country"><i>World</i></td>
                        <td data-title="Population (1000s)">6085576</td>
                        <td data-title="Adults (1000s)">3697511</td>
                        <td data-title="Share of world population (%)">100.00</td>
                        <td data-title="Wealth per capita">26416</td>
                        <td data-title="Share of world wealth (%)">100.00</td>
                        <td data-title="GDP per capita">7675</td>
                        <td data-title="Share of world GDP (%)">100.00</td>
                        <td data-title="Wealth Gini">0.804</td>
                        </tr>
                        ....
                        </tbody>
                        </table>
                        </div>
                    
  • Alerts Get notified on new alerts
  • Notifications Get notified on new notifications
  • Messages Get notified on new messages
  • Warnings Get notified on new warnings
  • Snap to increments
    Amount ($100 increments):
  • Range
    Price range:
  • Maximum
    Maximum Value:
  • Minimum
    Minimum Value: