CSS Table And Max-width In Chrome Not Working


Answer :

Technically Chrome is following the rules because max-width should only apply to block elements.



From MSDN docs:




The min-width/max-width attributes apply to floating and absolutely
positioned block and inline-block elements, as well as some intrinsic
controls. They do not apply to non-replaced inline elements, such as
table rows and row/column groups. (A "replaced" element has intrinsic
dimensions, such as an img or textArea.)




The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.



max-width property



MSDN Doc



The solution I found was using table-layout: fixed and width: 100%



Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.



Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"