How can I make a table horizontally scrollable on a mobile device?

Paul Frankowski Senior Staff

6 months ago · edited

Hi Kunt,

yes, for example, by using extra <div> with Bootstrap class name around <table>.

Technial details >> https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables

it will add bottom horizontal scroller if table doesn't fit on the screen. I use it from time to time.

KI

Knut Ingwersen Asked this

6 months ago

Hi Paul,

i used

<div class="table-responsive">
<table class="table">
...
</table>
</div>

But it doesn´t work.

Paul Frankowski Senior Staff

6 months ago

In that case you have to make deeper research Internet / AI.

I told you what I used on my sites.

KI

Knut Ingwersen Asked this

6 months ago

Hi Paul,
I just figured out how it works:
in the menu under Page Display in the CSS Class Page field,
I entered "table-responsive" and it works.

ML

MBCS LLC

4 months ago

This solution doesn't seem to work when using Page Builder Dynamic Page Content feature and Joomla articles.

Paul Frankowski Senior Staff

4 months ago

In that case you have dig deeper. ChatGPT/Gemini etc.