Bootstrap table stack on mobile


Topic: Bootstrap table stack on mobile

tom22 asked a year ago

Hello,

i have a simple bootstrap table without a table header.

How can i change the code so that i don't have to scroll horizontally with small screens, but the table is stacked?

This is my actual code:

<table class="mt-5 table table-striped table-hover align-middle" style="width: auto">
        <tbody>
            <tr>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A1</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A2</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A3</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord A4</td>
            </tr>
            <tr>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B1</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B2</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B3</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord B4</td>
            </tr>
            <tr>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C1</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C2</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C3</td>
                <td>Short Word LongWord VeryLongWord VeryVeryLongWord C4</td>
            </tr>
        </tbody>
    </table>

Thank you! :-)

Best Regards

Tom


Kamila Pieńkowska staff answered a year ago

It can be done but there is no readily available option or class. You need to add custom CSS. Example that you can modify to your needs here: https://mdbootstrap.com/snippets/standard/kpienkowska/5832042


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.0.0
  • Device: Mobile
  • Browser: FF
  • OS: Android
  • Provided sample code: No
  • Provided link: No