Responsive tables

Hi please!!

Any idea how to make responsive tables in rich text like the one in the video, being able to scroll horizontally??

Thanks

Isn’t the answer contained within your question? ie. overflow-x:auto;

Thanks. Tried but not working. Working for you?

No, I haven’t tried it.
If I can find some time, I’ll have a play around with it later.

1 Like

Thanks a lot !!! I appreciate it

Hello @Gerard_Fernandez
I am interested in this option.

instead of doing
<style ...><table>

can you test
<table style = "overflow-x: auto;">

1 Like

Thanks Manu. Have not been able to make it work.

Ah darn,

It is possible to have the web link of your example, just to understand.

Otherwise we’ll wait for @Darren_Murphy 's return, he’s a professional :slight_smile:

I found

<div style = "overflow-x: auto;">
<table style = "width: 1200px;">

adjust 1200px by a value according to your table.

How To Create A Responsive Table.

That is the link to the example. My app has sensitive info I cannot share. I am using join list with and to construct the table

I tested this solution with the data from your example under Glide and it works for me.

But,
it works on my Android phone, all you have to do is scroll with your finger.
But it does not work under a desktop application (google chrome)!

I was able to get it working by just using a table-wrapper class, ie.

<pre><span><style>
.table-wrapper {
  overflow-x: auto;
}

and then the HTML is…

<div class="table-wrapper">
<table>
blah, blah, etc
</table>
</div>

Result:

Haven’t tested on any devices though.

2 Likes

Hi @Darren_Murphy

your solution is more elegant.
Works with my phone, but I have the same result with a desktop app.
Depending on the width of the window, the large width does not display the entire table.

But if I reduce the width, the scroll works.

That’s because you used ‘auto’
If you want it always shown, use ‘scroll’:wink:

no sorry @Darren_Murphy this is not working

Actually yeah, scratch that.
The way I understand it, you’re only going to get the scroll bar if it’s needed.
If your display area is wide enough to fit the entire table, then you won’t see it.
Which kinda makes sense - a scroll bar would be a bit pointless in that case, hey?

almost,
(I understood the principle of the scroll :wink: )
except that in the greatest width, I do not see the whole table.

Okay, in that case I don’t know :grin:

1 Like

no big deal
If I have the time I would do some research for a solution.

@Gerard_Fernandez has a solution to his problem.