Border not appearing in IE9 & IE10

Question

I am having an issue with a table border not displaying correctly. Below is a fiddle recreating the issue.

This Fiddle produces expected results in FF and Chrome but not in IE9 and IE10.

Only css that is being applied is a border-collapse: collapse and

td{
   border:1px solid;
}

The second table row should have a border along the entire bottom however the border is missing on the second table cell. Can be seen in this image.

This issue disappears once part of the table is highlighted but the expected result is that the border should be there in the first place. Sometimes the fiddle must be updated for the issue to appear.

Is this a known IE issue or is there more styling that must be applied?

Answer 1

I had a similar problem and your solution above worked for me with a slight change. (I used primefaces)

Following code worked

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

Following code didn't work

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

Answer 2

Best solution that I could find:

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

Checked in both IE9 and IE10

Answer 3

Since this is caused by border-collapse: collapse it can also be solved by placing the borders in the correct places manually and using 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;
}

This doesn't work in IE7 and below because they don't support neither border-spacing nor :first-child.

Answer 4

For me this worked:

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