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 |
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 |
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 |
<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>