# Making Table responsive for Joplin Notes?

**URL:** <https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264>\
**Category:** Features\
**Created:** [5 August 2021 03:59 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264 "2021-08-05T03:59:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hhtmp88](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hhtmp88](https://discourse.joplinapp.org/u/hhtmp88)\
**Post date:** [5 August 2021 03:59 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/1 "2021-08-05T03:59:04Z")

</div>

Dear Joplin Team,

I am not sure if the table could be made responsive?

If it is not difficult, could it be added to the next version of Joplin?

Thanks for Your Great Works!

---

<div class="post-metadata">

**Author:** ![hhtmp88](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hhtmp88](https://discourse.joplinapp.org/u/hhtmp88)\
**Post date:** [8 August 2021 13:45 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/2 "2021-08-08T13:45:30Z")

</div>

Currently, it seems not possible using CSS on markdown table!

I can only successfully make a responsive table using HTML:

 | Hard | Soft | Hard | Soft | Hard | Soft | Hard | Soft | Hard | Soft |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Guttural喉音 | k | kh |
| Row 2 | k | kh |

- here is the corresponding HTML code:

```auto
<div style="overflow-x:auto;"> 
<table > <thead> 
<tr> 
<th>Hard</th>
<th>Soft</th> 
<th>Hard</th>
<th>Soft</th> 
<th>Hard</th>
<th>Soft</th> 
<th>Hard</th>
<th>Soft</th> 
<th>Hard</th>
<th>Soft</th> 
</tr> 
</thead> 

<tbody> 
<tr>
<th>Guttural喉音</th> 
<td>k </td> 
<td>kh</td>
 </tr>

<tr><th>Row 2</th> 
<td>k </td> 
<td>kh</td> 
</tr> 

</tbody> 
</table> 
</div>

```

Hope that in the future, responsive table can be made using markdown!

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [8 August 2021 13:47 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/3 "2021-08-08T13:47:38Z")

</div>

I can't quite tell from the markup what's unusual about your table. Isn't it already how we render tables?

---

<div class="post-metadata">

**Author:** ![hhtmp88](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hhtmp88](https://discourse.joplinapp.org/u/hhtmp88)\
**Post date:** [8 August 2021 13:57 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/4 "2021-08-08T13:57:30Z")

</div>

It is this code added to a normal table:

> [@hhtmp88](#):
>
> `<div style="overflow-x:auto;"> `

> [@laurent](#):
>
> Isn't it already how we render tables?

-\> No!  
-\> currently, for a long horizontal table, instead of only the table itself, all the text of the screen will move!

Attached is the screen capture from my android joplin.

 ![Responsive table_Screenshot_Android joplin](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3f58919f3e03c9122c897362685939d4f0e58b40.jpeg)

-\> the table can be scrolled horizontally, freely to its middle, or to the table end, or go back to the beginning,  
while other text in the screen will not move.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [8 August 2021 14:43 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/5 "2021-08-08T14:43:52Z")

</div>

Thanks for clarifying, I understand now.

I thought the table would somehow resize on mobile but it's scrollable instead, which is ok too. I don't think we could make that part of the app though because it requires wrapping the table in div and I'd rather avoid that.

---

<div class="post-metadata">

**Author:** ![hhtmp88](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hhtmp88](https://discourse.joplinapp.org/u/hhtmp88)\
**Post date:** [9 August 2021 07:58 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/6 "2021-08-09T07:58:28Z")

</div>

![Screenshot_2021-08-09-15-52-36-100_net.cozic.joplin](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b6b6728655590670b765da8db330aa69c2d63e50.jpeg)  
-- content , other than the long table , will be moved to the left

-- if I want to see them again, I have to move them back

-- if the markdown table is responsive, I don't need to do so, which is completely different user experience

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [8 October 2021 07:58 UTC](https://discourse.joplinapp.org/t/making-table-responsive-for-joplin-notes/19264/7 "2021-10-08T07:58:30Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.