Noted for future reference (by me). Tables aren’t that common on websites anymore, but sometimes they’re legitimately needed (you know, for tabular information).
One thing that I always struggle with is adding horizontal scroll to tables on responsive phone layouts. I know it involves overflow, but for some reason I always make the solution way more complicated than it needs to be.
You don’t need a container element. All you need to do is add these two CSS properties to your tables:
table {
display: block;
overflow-x: auto;
}
The StackOverflow post that illuminated the answer also has you add white-space: nowrap; but that can be problematic if your cells have enough text that they need to wrap. I found a better solution was to set a minimum width on cells:
th, td {
min-width: 120px;
}
You may want to experiment on any given site to see what min-width works best.