Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Table width on mobile devices

itsnathanham

New Coder
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.


Thanks!
 
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.

CSS:
/* 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
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom