# Responsive tables

**URL:** https://community.glideapps.com/t/responsive-tables/25336
**Category:** Ask for Help
**Created:** [April 9, 2021, 6:24am UTC](https://community.glideapps.com/t/responsive-tables/25336 "2021-04-09T06:24:58Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Gerard\_Fernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gerard_fernandez/32/1183_2.png) [@Gerard\_Fernandez](https://community.glideapps.com/u/Gerard_Fernandez)
#### Post date: [April 9, 2021, 6:24am UTC](https://community.glideapps.com/t/responsive-tables/25336/1 "2021-04-09T06:24:58Z")

</div>

Hi please!!

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

Thanks

 ![ezgif-2-f6da94d0aa6f](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/9/69eee146784f6641db9ce62dc5816aee90d9054f.gif)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 9, 2021, 6:34am UTC](https://community.glideapps.com/t/responsive-tables/25336/2 "2021-04-09T06:34:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Gerard\_Fernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gerard_fernandez/32/1183_2.png) [@Gerard\_Fernandez](https://community.glideapps.com/u/Gerard_Fernandez)
#### Post date: [April 9, 2021, 7:16am UTC](https://community.glideapps.com/t/responsive-tables/25336/3 "2021-04-09T07:16:47Z")

</div>

Thanks. Tried but not working. Working for you?

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 9, 2021, 7:30am UTC](https://community.glideapps.com/t/responsive-tables/25336/4 "2021-04-09T07:30:49Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Gerard\_Fernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gerard_fernandez/32/1183_2.png) [@Gerard\_Fernandez](https://community.glideapps.com/u/Gerard_Fernandez)
#### Post date: [April 9, 2021, 11:38am UTC](https://community.glideapps.com/t/responsive-tables/25336/5 "2021-04-09T11:38:30Z")

</div>

Thanks a lot !!! I appreciate it

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 11:51am UTC](https://community.glideapps.com/t/responsive-tables/25336/6 "2021-04-09T11:51:47Z")

</div>

Hello @Gerard_Fernandez  
I am interested in this option.

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

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

---

<div class="post-metadata">

### Author: ![Gerard\_Fernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gerard_fernandez/32/1183_2.png) [@Gerard\_Fernandez](https://community.glideapps.com/u/Gerard_Fernandez)
#### Post date: [April 9, 2021, 1:20pm UTC](https://community.glideapps.com/t/responsive-tables/25336/7 "2021-04-09T13:20:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 1:31pm UTC](https://community.glideapps.com/t/responsive-tables/25336/8 "2021-04-09T13:31:10Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 1:51pm UTC](https://community.glideapps.com/t/responsive-tables/25336/9 "2021-04-09T13:51:21Z")

</div>

I found

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

```

adjust 1200px by a value according to your table.

---

<div class="post-metadata">

### Author: ![Gerard\_Fernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gerard_fernandez/32/1183_2.png) [@Gerard\_Fernandez](https://community.glideapps.com/u/Gerard_Fernandez)
#### Post date: [April 9, 2021, 1:53pm UTC](https://community.glideapps.com/t/responsive-tables/25336/10 "2021-04-09T13:53:04Z")

</div>

[How To Create A Responsive Table](https://www.w3schools.com/howto/howto_css_table_responsive.asp#:~:text=a%20responsive%20table.-,Responsive%20Tables,to%20display%20the%20full%20content).

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

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 1:58pm UTC](https://community.glideapps.com/t/responsive-tables/25336/11 "2021-04-09T13:58:43Z")

</div>

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

 ![table scroll](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/347a4bc93fde295a3927a08893891694e27e4ec0.png)

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 2:05pm UTC](https://community.glideapps.com/t/responsive-tables/25336/12 "2021-04-09T14:05:47Z")

</div>

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)!

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 9, 2021, 2:17pm UTC](https://community.glideapps.com/t/responsive-tables/25336/13 "2021-04-09T14:17:58Z")

</div>

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

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

```

and then the HTML is…

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

```

Result:

 ![Screen Shot 2021-04-09 at 10.17.02 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/68379e491c76c21c9a380c17cb2acaa27cdabe4d.png)

Haven’t tested on any devices though.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 2:39pm UTC](https://community.glideapps.com/t/responsive-tables/25336/14 "2021-04-09T14:39:28Z")

</div>

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.

 ![Table Scroll Large](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/e/de28b9a864ea70e925314aa4871e602428b012e3.png)

But if I reduce the width, the scroll works.

 ![Table Scroll Small](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aa5d231792def7e16b5e6d70a5e4d757240feff2.png)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 9, 2021, 2:47pm UTC](https://community.glideapps.com/t/responsive-tables/25336/15 "2021-04-09T14:47:03Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 2:51pm UTC](https://community.glideapps.com/t/responsive-tables/25336/16 "2021-04-09T14:51:45Z")

</div>

no sorry @Darren_Murphy this is not working

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 9, 2021, 2:55pm UTC](https://community.glideapps.com/t/responsive-tables/25336/17 "2021-04-09T14:55:54Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 2:58pm UTC](https://community.glideapps.com/t/responsive-tables/25336/18 "2021-04-09T14:58:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [April 9, 2021, 3:02pm UTC](https://community.glideapps.com/t/responsive-tables/25336/19 "2021-04-09T15:02:51Z")

</div>

Okay, in that case I don’t know 😁

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [April 9, 2021, 3:09pm UTC](https://community.glideapps.com/t/responsive-tables/25336/20 "2021-04-09T15:09:10Z")

</div>

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

@Gerard_Fernandez has a solution to his problem.

[Next page](https://community.glideapps.com/t/responsive-tables/25336.md?page=2)