Tables don't scroll horizontally when they're too big for the screen

[jacobmischka]

Related tweet: https://twitter.com/jacobmischka/status/835936216088526850

[ruskakimov]

div#main has an overflow-x: hidden on it
The issue can be solved by adding the following styles to tables:

    display: block;
    max-width: 100%;
    overflow-x: auto;

but I am not sure if overriding the display property is a good idea. Any other ideas?

[ruskakimov]

Setting:

table td,
table th {
    word-break: break-word;
}

would fit the entire table to the available width. But the result is not very pretty:

[kazupon]

Close

[jacobmischka]

Interestingly the rightmost border on the table doesn't display when scrolled all the way right, but this is much better!