JA Spa: How to create a responsive table?

santulan-life

Hi,
how can we create a responsive table on a webpage?
i.e. 4 columns: 20%, 20%, 50%, 10%
Are there some styles that we can use?
Regards,
René

Ninja

santulan-life
Hi
The table view is tricky if there is large content in your table for the mobile view.
If the columns are more it will add scroll for mobile view as it is not possible to fit all content.
Here is default typography supported for the Boostrap 5 you can use to create the tables : https://getbootstrap.com/docs/4.0/content/tables/

santulan-life

Here are the screenshots of a schedule table, made with T4 Page Builder: 1. on normal monitor, 2. on mobile
One can see the responsive behaviour of the table.
We don't want to use T4 PB longer, because of serious bugs.
So there must be a way to write that simple schedule table as a responsive table, using div classes, float left, ... I'm sure that in T4 framework there are div classes which we can use for building a responsive table with 4 columns.

Ninja

santulan-life div classes which we can use for building a responsive table with 4 columns.

Hi
The framework use the same Typo as the JA Spa temlate based on the T4 and BS4 framework. With Div classes it work for the PC view. in phone as u already know the screen size is too small and it is not possible 4 columns display with viewing font size data. Mobile screen can not fill that much spaces."

santulan-life

Thanks, pankaj! I did the 4-column-table in that way, it also is displayed nicely on mobile. Define styles in custom.css

div-table:
<div class="sanlife-kurs-tabelle">
<div class="sanlife-left01">Time</div>
<div class="sanlife-middle01">Day</div>
<div class="sanlife-middle02">Coursename</div>
<div class="sanlife-right01">Arrow-Icon</div>
<div class="sanlife-kurs-tabelle-newline"> </div>
...
</div>
Regards, René

Ninja

santulan-life
Glad to hear the suggestion worked out well for you!