Make tables responsive #1139

New Issue

OVERLORD · 2026-02-04T23:57:28+03:00

OVERLORD commented

2026-02-04 23:57:28 +03:00

Originally created by @hambern on GitHub (Apr 11, 2019).

Describe the feature you'd like
I want the tables to be responsive by default. Now, on my mobile, the tables breaks the designs. It should really be fairly simple.

Describe the benefits this feature would bring to BookStack users
It would make the pages look a lot better

Additional context
Just try it, and you'll see.

Originally created by @hambern on GitHub (Apr 11, 2019). **Describe the feature you'd like** I want the tables to be responsive by default. Now, on my mobile, the tables breaks the designs. It should really be fairly simple. **Describe the benefits this feature would bring to BookStack users** It would make the pages look a lot better **Additional context** Just try it, and you'll see.

OVERLORD added the 🛠️ Enhancement 🎨 Design labels 2026-02-04 23:57:28 +03:00

OVERLORD commented

2026-02-04 23:57:32 +03:00

@ssddanbrown commented on GitHub (Apr 11, 2019):

Thanks for the suggestion @Hambern.

It should really be fairly simple.

This can be a little tricky. Can't really just add a max-width and be done with it since tables are often just too wide to fit on a screen. Therefore making it scroll-able seems like the best option. But we can't make the table itself scroll-able, so we need to wrap it. Can do this with JS pretty easily but I've always hated the idea of needing JS for a core piece of page content. Then how do you indicate to the user it's scrollable? The wrapper will just cut of the edge and the scroll bar (If even shown on the device) could be much lower down. So maybe a nice little shadow on the overflowing edge?

If needed for now, you could add something like this the custom HTML head textarea in the settings:

<script>
window.addEventListener('DOMContentLoaded', () => $('.page-content').find('table').wrap('<div/>').parent().css({'overflow-x': 'auto'}));
</script>

Otherwise, If anyone knows of a CSS only solution that work with the current table structure (Not adding custom attributes, for example) that would be great.

@ssddanbrown commented on GitHub (Apr 11, 2019): Thanks for the suggestion @Hambern. > It should really be fairly simple. This can be a little tricky. Can't really just add a max-width and be done with it since tables are often just too wide to fit on a screen. Therefore making it scroll-able seems like the best option. But we can't make the table itself scroll-able, so we need to wrap it. Can do this with JS pretty easily but I've always hated the idea of needing JS for a core piece of page content. Then how do you indicate to the user it's scrollable? The wrapper will just cut of the edge and the scroll bar (If even shown on the device) could be much lower down. So maybe a nice little shadow on the overflowing edge? If needed for now, you could add something like this the custom HTML head textarea in the settings: ``` <script> window.addEventListener('DOMContentLoaded', () => $('.page-content').find('table').wrap('<div/>').parent().css({'overflow-x': 'auto'})); </script> ``` Otherwise, If anyone knows of a CSS only solution that work with the current table structure (Not adding custom attributes, for example) that would be great.

OVERLORD commented

2026-02-04 23:57:36 +03:00

@msaus commented on GitHub (Apr 24, 2019):

@ssddanbrown
I am not sure if it works and good for current table structure, but, I found solution that uses only css.

Here we go.

https://www.cssscript.com/demo/pure-css-mobile-friendly-responsive-table/

@msaus commented on GitHub (Apr 24, 2019): @ssddanbrown I am not sure if it works and good for current table structure, but, I found solution that uses only css. Here we go. https://www.cssscript.com/demo/pure-css-mobile-friendly-responsive-table/

OVERLORD commented

2026-02-04 23:57:44 +03:00

@ssddanbrown commented on GitHub (Apr 24, 2019):

@msaus Thanks for the suggestion but that solution requires custom data attributes on each cell of the table.

@ssddanbrown commented on GitHub (Apr 24, 2019): @msaus Thanks for the suggestion but that solution requires custom data attributes on each cell of the table.

OVERLORD commented

2026-02-04 23:57:57 +03:00

@msaus commented on GitHub (Apr 25, 2019):

@ssddanbrown
Oh...yes.

If we use that then we have to modify and/or add TinyMce? for this to make it working.

@msaus commented on GitHub (Apr 25, 2019): @ssddanbrown Oh...yes. If we use that then we have to modify and/or add TinyMce? for this to make it working.

OVERLORD commented

2026-02-04 23:58:02 +03:00

@hambern commented on GitHub (Sep 2, 2019):

Now you also have to add jQuery for the script to work:

<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous">
</script>

<script>
  window.addEventListener('DOMContentLoaded', () => $('.page-content').find('table').wrap('<div/>').parent().css({'overflow-x': 'auto'}));
</script>

@hambern commented on GitHub (Sep 2, 2019): Now you also have to add jQuery for the script to work: ``` <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"> </script> <script> window.addEventListener('DOMContentLoaded', () => $('.page-content').find('table').wrap('<div/>').parent().css({'overflow-x': 'auto'})); </script> ```

OVERLORD commented

2026-02-04 23:58:08 +03:00

@polarathene commented on GitHub (Oct 25, 2019):

Not exactly making them responsive, but just ran into an issue with excessively large table content breaking out of the "page" width and overflowing. A horizontal scrollbar can fix that, but due to height of the table becomes not very practical.

Values could be tweaked, but have just added this basic CSS in the settings page to fix the usability issue(and the overflowing out of the page container):

<style>
/* Custom CSS, defined in Settings page */
.page-content table {
  overflow: scroll;
  display: block;
  /* `!important` is required to override the official styles `!important`.. */
  height: 800px !important;
}
</style>

@ssddanbrown Does page-content table have height: auto !important for any specific reason?

@polarathene commented on GitHub (Oct 25, 2019): Not exactly making them responsive, but just ran into an issue with excessively large table content breaking out of the "page" width and overflowing. A horizontal scrollbar can fix that, but due to height of the table becomes not very practical. Values could be tweaked, but have just added this basic CSS in the settings page to fix the usability issue(and the overflowing out of the page container): ```HTML <style> /* Custom CSS, defined in Settings page */ .page-content table { overflow: scroll; display: block; /* `!important` is required to override the official styles `!important`.. */ height: 800px !important; } </style> ``` @ssddanbrown Does `page-content table` have `height: auto !important` for any specific reason?

OVERLORD commented

2026-02-04 23:58:11 +03:00

@zuglah commented on GitHub (Sep 4, 2024):

Quick hack that works for me :

<!-- make wide table responsive -->
<style>
.page-content div:has(> table) {
  overflow-x: auto;
}
</style>

@zuglah commented on GitHub (Sep 4, 2024): Quick hack that works for me : ```  <style> .page-content div:has(> table) { overflow-x: auto; } </style> ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1139