Scrollbar in long markdown tables

[alexeihornero]

I created the following test table in a .md file:

Test1	Test2	Test3	Test4	Test5	Test6	Test7
Hello	code	code	code	code	code	longtextlongtextlongtextlongtextlonglongtextlongtextlongtextlongtextlong

The contents of a row that expand beyond the current window are not viewable. There is also no way to scroll horizontally on the table to view the contents at the end of the row.

Any ideas how to get around this?

Thanks.

[pirvana]

The same thing happens to me, would there be any solution to this problem?

[stendall-the-one]

Same here with Firefox 71.0 (64-bit) (Ubuntu Focal)
Happens in vertical scroll too. With two panes, sometimes the left edit pane have content that it's not visible on right preview pane because (I've guess) the view it's attached to the left pane and there's no way to scroll preview pane independently.
Anyway, great project. Big thanks you for your time.

[githubdave2020]

You could add this to the CSS override in the Theme area in Administration. I'm still trying to remove padding and such.

tr:nth-child(even){background-color:#eee}tr:hover{background-color:#fff}table{width:100%;overflow-x:auto;display:block;white-space:nowrap;font-size:small;}

[alexeihornero]

Thanks, it's works for me.

[regevbr]

For me the following worked without overflow:

.contents table {
  width:90%;
  overflow-x:auto;
  display:block;
  white-space:nowrap;
  font-size:small;
}

[windware-ono]

With the current Wiki.js rendering having figure tag surrounding every table tags, this code would make all the tables at least fill the screen as well without having have to turn the table itself into display: block.

.contents figure {
  overflow-x: auto;
  white-space: nowrap;
}

.contents figure > table {
  width: 100%;
}

Additionally, having this would prevent texts such as long URLs breaking the layout (leading to breaking the popup menu position as well, which makes it hard to navigate out of the page),

.contents li,
.contents p {
  word-break: break-word;
}

I really think these should be the default as it's very easy to break the mobile experience with some long text or wide tables.

[sn4k3s]

Is there any progress with that bug without some workarounds? It kinda makes it impossible to work with large tables.

[marcelomendes]

Any workaround for this without having to hack the default theme?

[vogonsaudi]

I modified this for my use case since I wanted the contents in the table to wrap.

.contents figure {
overflow-x: auto;
white-space: wrap;
}

.contents figure > table {
width: 100%;
}
.contents li,
.contents p {
word-break: break-word;
}

I suspect this is more likely to be the the default behaviour wanted.