title: CSS table row border not showing correctly in chrome and IE
body: <p>I have created a simple table with bottom row borders. In Firefox it works perfectly, and borders are being shown in the whole row, but in Chrome and IE 10 it shows only on part of the row :</p>
  
  <pre><code>&lt;div style="display:table; border-collapse: collapse; width: 100%"&gt;
  &lt;div style="display:table-row; border-bottom: 1px solid black;"&gt; 
      &lt;div style="display:table-cell;"&gt;a &lt;/div&gt;
      &lt;div style="display:table-cell; width: 15%;"&gt;b &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="display:table-row; border-bottom: 1px solid black;"&gt; 
      &lt;div style="display:table-cell; width: 15%;"&gt;a &lt;/div&gt;
      &lt;div style="display:table-cell; width: 15%;"&gt;c &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="display:table-row; border-bottom: 1px solid black;"&gt; 
      &lt;div style="display:table-cell;"&gt;a &lt;/div&gt;
      &lt;div style="display:table-cell; width: 15%;"&gt;b &lt;/div&gt;
      &lt;div style="display:table-cell; width: 15%;"&gt;c &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vnpnhu33/" rel="nofollow noreferrer">fiddle link</a></p>
  
  <p>Maybe someone know how to fix this problem?</p>