HTML & CSS Table width on mobile devices

[itsnathanham]

I have a problem with table widths on site when there are multiple columns. As you can see on mobile devices below, the table (in H2 section Comparing the best gaming keyboards) extends beyond the width of the content area. Is there a way to force side scroll?

I've been playing around in the style.css theme files section on site to try and fix it but I can't figure it out. Note, I am not a developer, hence the noob question. But I'd like to learn.

Gaming Keyboard Reviews - Setup.gg

Get access to Setup.gg's library of gaming keyboard reviews and top picks.

setup.gg

Thanks!

 

[OldMan]

Post your code HTML & CSS what you gave us works great. Please identify the problem area and what you want the final piece to look like.

 

[itsnathanham]

I used the below to force the responsive horizontal scroll and adjust some in-cell alignment in my staging environment. But that update ended up centering on page tables that don't span the full width of the page. Ideally, I'd like the following flexibility:

1.) Full-width tables, regardless of the number of columns.
2.) Left alignment of tables in the content area.
3.) Upper left alignment of text within cells.
4.) Horizontal scroll for responsiveness on narrower screen sizes.
5.) Added margin below tables of 22px.

Is this possible and what would be the best way to implement it? Note, if you have better and more current ways than the below to implement I'm open. I mostly copied the below from some sites and don't know the best approach across browsers.

/* TABLE FORCE SCROLL */
table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 22px;
}

/* TABLE TEXT ALIGNMENT */
td {
    text-align: left;
    vertical-align: top
}