CSS table and max-width in Chrome not working

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.