Make tables responsive

[hambern]

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.

[ssddanbrown]

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.

[msaus]

@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/

[ssddanbrown]

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

[msaus]

@ssddanbrown Oh...yes.

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

[hambern]

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>

[polarathene]

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?

[zuglah]

Quick hack that works for me :

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