Border not displaying in IE9 and IE10

Question

I have a problem with incorrect display of the table border. The following is a fiddle recreating the problem.

This Fiddle gives the expected results in FF and Chrome, but not in IE9 and IE10.

Only the css that applies is collapse collapse: crashing and

td{ border:1px solid; } 

The second row of the table should have a border along the entire bottom, but the border is absent in the second cell of the table. You can see the image in this.

This problem disappears when part of the table is selected, but the expected result is that the border should be there first. Sometimes the script needs to be updated for the problem to appear.

Is this a known IE issue, or is there a more style that should be applied?

Answer 1

The best solution 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

Tested in both IE9 and IE10

Answer 2

Since this is caused by border-collapse: collapse , it can also be resolved by manually placing the borders in the correct places 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 does not work in IE7 and below because they do not support either border-spacing or :first-child .

Answer 3

For me this one worked:

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

Answer 4

I had a similar problem and your solution above worked for me with minor changes. (I used simple ones)

Executed code

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

The following code did not work

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