Question

我遇到表边框无法正确显示的问题。下面是重述这个问题的小提琴。

此Fiddle会在FF和Chrome中产生预期结果，但在IE9和IE10中不会产生预期结果。

只有正在应用的css是边框折叠：折叠和

td{
   border:1px solid;
}

第二个表行应该在整个底部有一个边框，但第二个表格单元格上缺少边框。可以在此image中看到。

一旦表格的一部分突出显示，此问题就会消失，但预期的结果是边框应该首先出现在那里。有时必须更新小提琴才能显示问题。

这是一个已知的IE问题还是必须应用更多样式？

Answer 1

我能找到的最佳解决方案：

table{border-top:1px solid #000;}
tr{border-left:1px solid #000;border-bottom:1px solid #000;}
td{border-right:1px solid #000;}

Example here

检查IE9和IE10

Answer 2

由于这是由border-collapse: collapse造成的，因此也可以手动将边框放在正确的位置并使用border-collapse: separate来解决。

table { 
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border-bottom:1px solid;
    border-right:1px solid;
}

tr > td:first-child {
    border-left: 1px solid;
}

table tr:first-child td {
    border-top: 1px solid;
}

这在IE7及更低版本中无效，因为它们既不支持border-spacing也不支持:first-child。

Answer 3

对我来说this工作：

<table cellspacing="0" and cellpadding="0"> ... </table>

Answer 4

我遇到了类似的问题，上面的解决方案对我有所改变。（我使用过primefaces）

以下代码工作

.ui-datatable tbody>tr>td {
    border-top: 1.1px solid; 
}

以下代码无效

.ui-datatable tbody>tr>td {
    border-top: 1px solid; 
}

Answer 5

我发现在position: static; / th上使用td效果很好。

table {
    border-collapse: collapse;
    border: none;
}
tr {
    border: none;
}
th, td {
    position: static;
    border: 1px solid #000;
}

边框没有出现在IE9＆amp; IE10

5 个答案: