Fix max-width images inside of tables inside firefox

Thursday, June 26th 2014

This is an issue I had no clue I would run into. Lately it seems FireFox has been having some wonky little bugs. We have images inside of our tables that are set to max-width: 100%;. No big deal right? Wrong. Firefox renders it as the full width of the image. Not the full width of the parent container. Take a look:

image

Now how do you solve this? It's actually pretty easy. Just do table { table-layout: fixed; } and you're done.

Maybe not quite fixed

While this solution worked for me, it may not work for you. We have a responsive table solution that took care of the now fixed width cols.

Credit: http://blog.room34.com/archives/5042 (this problem has been around since 2012...)