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

＆＃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;

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

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

1 个答案: