Questions about displaying wide tables

[jlc (John L. Clark)]

I’m curious to understand more about the strategies that Discourse uses for displaying wide tables (that is, tables that are wide enough to overflow the containing box). This topic seems to indicate that Discourse will show an expand table button for wide tables:

Expand Table button shows wrong table

I recently created a post that contained a couple of tables. The first table looked like this: Drug Example prescription(s) Feature(s) abacavir 300 mg mg by mouth twice daily 600 mg by mouth once daily Multiple templates for the same drug abacavir / dolutegravir / lamivudine 1 tablet by mouth daily Combination drug levonorgestrel One tablet by mouth as soon as possible within 72 hours of unprotected sexual intercourse or suspected contraceptive failure Free text dosing instructions …

And this topic seems to indicate that Discourse should show horizontal scroll bars for wide tables:

Horizontal scroll bar for wide tables visible in Mobile?

When wide tables exist, in the desktop theme there is a horizontal scroll bar that hints the visitor we can scroll left and right. However in the Mobile theme there is no such scroll bar and the wide table view is really not intuitive, with visitors not being aware that the table is wider than their screen width. Could we add a scroll bar for mobile as well? Discussion about this matter (however regarding only Desktop theme) occurred bere

But when viewing that first topic, I don’t see either of those behaviors for the second table (on either my phone or my (Chrome) web browser with a very small window width). What is the current expected Discourse behavior for wide tables?

[mattdm (Matthew Miller)]

Wide table

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7
12345678901234567890	12345678901234567890	12345678901234567890	12345678901234567890	12345678901234567890	12345678901234567890	12345678901234567890

[mattdm (Matthew Miller)]

It works for me on Chrome — it’s not super obvious, but if you drag to scroll, a bar appears.

In the links, the text gets wrapped in the cells, so it ends up not being very wide.

[jlc (John L. Clark)]

I do see the scroll bar appear on the example you posted (on my phone), but not on the second table in the first post above (even though almost all of the JSON in the right column is clipped). What might be different about the two cases?

[JammyDodger]

The table in that post is behaving a bit weirdly for me, and appears to be conjoined with the first one when it comes to Expand, etc.

The second table is created with HTML rather than Markdown to allow the codeblocks, so that may be what’s muddling it together, as well as not getting the scrollbar applied.

[jlc (John L. Clark)]

Ah yes, I see that the author of that first post even mentions that the first table is a Markdown table and the second one is HTML, although I suppose I didn’t expect that to be relevant, at first. And then, looking at the cooked source, I see that Markdown tables (like the one @mattdm posted earlier) are wrapped in a <div class="md-table">. I wonder why there is a specific class for Markdown tables, and why Discourse only displays wide tables of that type with scroll bars. This is starting to seem like a bug to me; do others agree?

I am also still curious about the expand table button functionality. I see the button included in the cooked source for the example table from earlier in this topic and also in the cooked source for the second table (the HTML table) in the “Expand Table button shows wrong table” post, but not in the first table (the Markdown table) in that post. But those buttons are not displayed when you hover over the respective tables, as far as I can see.