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)

List of countries by distribution wealth
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

List of countries by distribution wealth
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

List of countries by distribution wealth
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>