Dev Stack Source

Answer : Use the border-spacing property on the table element to set the spacing between cells. Make sure border-collapse is set to separate (or there will be a single border between each cell instead of a separate border around each one that can have spacing between them). Check this fiddle. You are going to need to take a look at using border-collapse and border-spacing. There are some quirks for IE (as usual). This is based on an answer to this question. table.test td { background-color: lime; margin: 12px 12px 12px 12px; padding: 12px 12px 12px 12px; } table.test { border-collapse: separate; border-spacing: 10px; *border-collapse: expression('separate', cellSpacing='10px'); } <table class="test"> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> ...

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.