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

时间:2014-12-17 13:22:26

标签: html css border css-tables

我创建了一个带有底行边框的简单表格。在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

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

1 个答案:

答案 0 :(得分:2)

添加空div s。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

注意: Haven未在IE上测试过。