Transpose HTML table in Mobile/Tablet view in bootstrap

Question

Is it possible to Transpose a HTML table in Mobile/Tablet so we can display all the columns in Mobile as well. Below image is the example what i am trying to achieve.

Answer 1

Try to add a class table-responsive to the table tag of your html. It's a bootstrap class to make tables responsive.

Answer 2

This is all you need. Its great for your need, you will love it.

Check this link - foo table library/plugin : https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

Answer 3

This link will help you need

TABLES RESPONSIVES WIDTH 100%

index.html

<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>Company</th>
            <th class="numeric">Price</th>
            <th class="numeric">Change</th>
            <th class="numeric">Change %</th>
            <th class="numeric">Open</th>
            <th class="numeric">High</th>
            <th class="numeric">Low</th>
            <th class="numeric">Volume</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAC</td>
            <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
            <td class="numeric">$1.38</td>
            <td class="numeric">-0.01</td>
            <td class="numeric">-0.36%</td>
            <td class="numeric">$1.39</td>
            <td class="numeric">$1.39</td>
            <td class="numeric">$1.38</td>
            <td class="numeric">9,395</td>
        </tr>
    </tbody>
</table>

css.css

@media only screen and (max-width: 800px) {
    #unseen table td:nth-child(2), 
    #unseen table th:nth-child(2) {display: none;}
}

@media only screen and (max-width: 640px) {
    #unseen table td:nth-child(4),
    #unseen table th:nth-child(4),
    #unseen table td:nth-child(7),
    #unseen table th:nth-child(7),
    #unseen table td:nth-child(8),
    #unseen table th:nth-child(8){display: none;}
}