Question: How to mark up big tables?

[samimaattaCelia]

How do other agencies deal with really big tables that (at worst) overflow over the margins? Seems to me that the only way to combat this is using styles. For example if the following table is too large, you can tag it with a <div> with a style: overflow-x: auto. This way there appears a horizontal scrollbar.

Code snippet:

<div style="overflow-x: auto;">
<table>
...
</table>
</div>

This could be implemented on guidelines level.

[martinpub]

Hi @samimaattaCelia, great that you bring this issue up. At MTM we haven't worked with this in particular, but that is not to say we don't have issues.

Perhaps the style overflow-x could be applied more generally in an agency CSS file? E.g. are there cases where you would not want to have the auto property? On what level should the style be applied in tables, the full table as in your example?

[samimaattaCelia]

@martinpub, I agree that it should be included in the CSS file. I'm hoping it wouldn't have to be a custom job every time a large block element happens.

Here is a demo I whipped up with two options.

The challenge is that the when the overflow happens at the table (or at some other element that is blocky), that particular table (or element) should be wrapped with <div> (or other element) with overflow-x: auto; If it's applied at section level the whole section is included as the scrollable area, which we don't want.

[martinpub]

Thanks for the demo @samimaattaCelia!

Ah, I thought it could be applied on the <table> element (or another block element) itself, but that does not seem to work, at least not in your example. Adding an extra wrapping seems cumbersome. (I'm no CSS ninja myself.)

[samimaattaCelia]

@martinpub, it does seem that the <table> has to be nested for it to work. I'm not aware of any better solution at the moment - as I'm neither a CSS ninja. 😄

In production it could just be made so that any block element, or any element that has the risk of overflow, has to be wrapped with a <div> with a certain class that's in the CSS. In the wild I have only seen overflow with very large tables and long equations (as linebreaking is still not a feature, I guess).

It would make the code more verbose, but there wouldn't be overflow problems. Happy to hear of another solution to this!

[jonaslil]

Discussed this with Sami and we think a solution would be to have an optional div class="table-wrapper" that can be added around tables upon request or when problems are detected. And our stylesheets should have a rule that applies overflow-x: auto to this div.

[oscarlcarlsson]

@jonaslil sounds interesting. have you tried this on any recent titles?

[jonaslil]

Tested it with a recent book in Thorium, Calibre and Colibrio Vanilla Reader. It works for getting a horizontal scrollbar at the bottom of the table.

In the Calibre viewer, I needed some additional CSS for displaying a table that was both long and wide. Calibre clips the bottom part of a long table, so you wont be able to access the horizontal scrollbar. Then you need to add a vertical scroll bar as well:

div.table-wrapper {
  overflow-x:auto;
  overflow-y:auto;
  max-width:100%;
  max-height:100%;
}

[oscarlcarlsson]

Nice! Was it a media overlays title you tried it on? Otherwise we could have a look at adding this to a media overlays title to see how it works.

[jonaslil]

No, it wasn't a media overlays title. I would suppose that it doesn't affect MO behaviour since it is only a matter of applying CSS, but who knows?

[oscarlcarlsson]

We can add it to our test file to see how it works.

[martinpub]

This is a good solution, thanks @samimaattaCelia and @jonaslil.

@oscarlcarlsson I don't expect MO problems, but great if you test it.

[jonaslil]

Added the proposed solution to the section about tables. Closing the issue, but we can reopen it if problems appear in MO testing.