CSS table row border not showing correctly in chrome and IE

Question

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 :

<div style="display:table; border-collapse: collapse; width: 100%">
<div style="display:table-row; border-bottom: 1px solid black;"> 
    <div style="display:table-cell;">a </div>
    <div style="display:table-cell; width: 15%;">b </div>
</div>
<div style="display:table-row; border-bottom: 1px solid black;"> 
    <div style="display:table-cell; width: 15%;">a </div>
    <div style="display:table-cell; width: 15%;">c </div>
</div>
<div style="display:table-row; border-bottom: 1px solid black;"> 
    <div style="display:table-cell;">a </div>
    <div style="display:table-cell; width: 15%;">b </div>
    <div style="display:table-cell; width: 15%;">c </div>
</div>

</div>

fiddle link

Maybe someone know how to fix this problem?

Answer 1

Add empty divs.

<div style="display:table; border-collapse: collapse; width: 100%">
  <div style="display:table-row; border-bottom: 1px solid black;">
    <div style="display:table-cell;">a</div>
    <div style="display:table-cell; width: 15%;">b</div>
    <div style="display:table-cell; width: 15%;"></div>
  </div>
  <div style="display:table-row; border-bottom: 1px solid black;">
    <div style="display:table-cell; width: 15%;">a</div>
    <div style="display:table-cell; width: 15%;">c</div>
    <div style="display:table-cell; width: 15%;"></div>
  </div>
  <div style="display:table-row; border-bottom: 1px solid black;">
    <div style="display:table-cell;">a</div>
    <div style="display:table-cell; width: 15%;">b</div>
    <div style="display:table-cell; width: 15%;">c</div>
  </div>

</div>

Note: Haven't tested on IE.