html - CSS 表格行边框在 chrome 和 IE 中无法正确显示

Question

我创建了一个带有底部行边框的简单表格。在 Firefox 中它运行完美，边框显示在整行中，但在 Chrome 和 IE 10 中它只显示在部分行中:

<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

也许有人知道如何解决这个问题？

Answer 1

添加空的 div。

<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>

注意:尚未在 IE 上测试。