我创建了一个带有底行边框的简单表格。在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>
也许有人知道如何解决这个问题?
答案 0 :(得分:2)
添加空div
s。
<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上测试过。