wide tables in mobile view

[cipman]

If I have wide tables in some posts and I try to read them on narrow display devices (in mobile view - like on the phone) I get reversed colors when scrolling to see the part of the table that doesn't fit to the screen.

Example of a post:

---
layout: post
title: Table
---
|1|1|2,584|6,000|36,85|7,000|83,78|0,00|6,10|10,15|136,93|31,19|3,16|7,11|0,13|0,42|315,82|
|1|1|2,584|6,000|36,85|7,000|83,78|0,00|6,10|10,15|136,93|31,19|3,16|7,11|0,13|0,42|315,82|`

for which I get this screen when scrolling to the right.

Any clues as to what should I change in _layout.css?

[fongandrew]

This is probably because the page as a whole has a black background but the main content area itself is white. Your table isn't flipping colors. It's just transparent. So when it sticks out of the content area, the black background shows up behind it.

Couple of suggestions:

• Add a light background color to your table

• Add overflow-x: auto to .content.

[cipman]

Second suggestion does the trick with markdown tables and the first is needed with html tables.
Thank you Andrew!