title: CSS table and max-width in Chrome not working
body: <p>This is my CSS code;</p>
  
  <pre><code>#wrap {
      width:50em;
      max-width: 94%;
      margin: 0 auto;
      background-color:#fff;  
  }
  
  #head {
      width:50em;
      height:10em;
      max-width: 100%;
      margin: 0 auto;
      text-align:center;
      position: relative;
  }
  
  #css-table { 
      display: table; 
      margin: 1em auto;
      position: relative;
      width:50em;
      max-width: 100%;            
  }
  
  #css-table .col { 
      display: table-cell; 
      width: 20em;
      padding: 0px;
      margin: 0 auto;
  }
  
  #css-table .col:nth-child(even) { 
      background: #fff;
  }
  
  #css-table .col:nth-child(odd) { 
      background: #fff;
      border-right: 4px double #b5b5b5;
  }
  </code></pre>
  
  <p>And my HTML code;</p>
  
  <pre><code>&lt;div id="cont"&gt;
      &lt;div id="css-table"&gt;
          &lt;div class="col"&gt;123&lt;/div&gt;
          &lt;div class="col"&gt;123&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.</p>
  
  <p>Is there a reason why is Chrome doing this?</p>