CSS snag of the day: images in tables with max-width set, not displaying properly in Firefox

When did Firefox become such a steaming pile?

OK, that’s not how I intended to start this. Just kinda had to get it out there. Anyway, a client brought an unusual bug with their website to my attention today.

Since embracing responsive web design last year, I’ve become quite fond of using this little bit of code to make images resize dynamically to fit their containers:

img {
  height: auto;
  max-width: 100%;
  width: auto;
}

Most of the time this little bit of CSS works magic. But in this particular case, it did not. The client has put together a table on a page to present a set of photos of board members. In most browsers, the table looks great and is fluidly scaling down the images. But in Firefox, we found it was clumsily overflowing its borders, rendering the images at their full sizes.

After working my way through a few surprisingly unhelpful posts on Stack Overflow, I found my way to this, which seemed to hold an only-too-simple answer:

table {
  table-layout: fixed;
}

I don’t know about you, but I never use table-layout. I’ve come to realize there’s a whole realm of CSS that I just basically never touch, because it’s (usually) completely unnecessary to the way I build pages. But every once in a while, these things come in handy. Turns out, table-layout: fixed was exactly what I needed to — BOOM! — fix the problem with the too-large table images in Firefox.

And, suddenly, CSS was magic again.

17 thoughts on “CSS snag of the day: images in tables with max-width set, not displaying properly in Firefox

  1. I’m running into this exact same problem, except this solution only seems to work if the table (or in my case display: table) element has a static width, like width: 100% or something like that. Do you know of a way to get the responsive image stuff to work in Firefox without declaring a width on the containing table?

  2. I am working with images within the tables, spent hours but nothing seems to be working. It looks fine when i check it in IE, as soon as i place the code in firefox(CMS that my employer using only supports firefox), complete styling gets changed for the images.
    I tried with but it didn’t worked for me :(
    Any help is highly appreciated..
    Thanks, Sriram

  3. Thanks for sharing, this really helped!

    I did find that I had to declare 100% width on the containing table. FWIW, this was for an html email, and I declared that 100% width in CSS in my media query.

  4. Do you have a page showing the issue you’ve discussed above? It sounds like your code was relying on a bug in certain other browser engines. If I could have a look at the code, I could double-check.. if it *is* a bug in Gecko we need to do something about it.

  5. THANK YOU SO MUCH! This solved my same problem, which I’ve been tinkering with for over 5 hours. Great, simple solution!!

  6. Thanks for this post – saved me potentially hours of work!

    …wait a sec, I get PAID by the hour! You jerk! :p

  7. This is why blogs are awesome. A year later and you’re still helping people. Thank you very much.

  8. Fantastic, this worked for me too. Fixed the issue in both Firefox and IE 11. All other browsers did not have this issue. I had to read the comments to see that tables have to be 100% wide though for this to work. May want to add that to the instructions. Just a thought. Thanks!

  9. This just came up for me as a problem in IE10 on a styled as ‘display: table’

    The images on the list elements weren’t scaling, but adding ‘table-layout: fixed;’ on the sorted it out.

    Thank you!

  10. You are a lifesaver! The table-layout property fixed a long-standing problem that I have been struggling with in a SharePoint environment.
    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>