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?

Zoara

Answer 1

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

Bimah

If you make the edit in JSFiddle it will solve the issue initially. However, upon selecting "Update" the issue will return. It seems like some interaction (highlighting, changing in JSFiddle, inspecting with developer tools) with the table will cause it to render the border correctly, however it doesn't render on initial page load. – Zoara

humm... Yes, it's very strange... Updated answer – Bimah

This fixed my issue. Needed minor modifications to work on my application (there was a global css style on the td which had to be overwritten with border-bottom-style: none). Thank you. – Zoara

@PavloShandro This shouldn't work. At least in my tests, putting borders on TR elements with CSS doesn't show in IE10, so the table explained above will not have a left nor bottom border. – Nicosia

Answer 2

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; 
}

Breastpin

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.

Wicked

In IE11, border-collapse: separate and border-spacing: 0 worked for me. – Chelsea

Answer 4

For me this worked:

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

Unequal

Answer 5

I found using position: static; on the th/td works well.

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

Autograph