stack stack - 3 months ago 8
CSS Question

Border assigned over TD is not working in IE

I have a

Table
in which there are TD's. In one of those td's, I am applying border. It is
working fine in CHROME, but its getting disturbed in IE.

NOTE:- Earlier, when the cellpadding of the table was 2 it was looking fine but when I increased the cellpadding the border got disturbed.

Here is how it looks like

img1

and here is the fiddle

what should I do to make it work in IE

Answer

Do you mean you want it looking like this?

https://jsfiddle.net/Hastig/o1j88quk/3/

If so add table { border-collapse: collapse; } to your css.

May also have to remove cellspacing="10" from inline style of table


To remove middle line

change

tr.black-border td {
  border-top: 1px solid #0D63B0;
  border-bottom: 1px solid #0D63B0;
}

to

tr.black-border:nth-child(3) td {
  border-top: 1px solid #0D63B0;
}
tr.black-border:nth-child(4) td {
  border-bottom: 1px solid #0D63B0;
}

Alternatively, you can control the border style by adding classes, if old IE has a problem with nth-child(x)

Comments