CODEWITHSUNDEEP
htmlcss
HEEN
HEEN

Reputation: 4721

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

Upvotes: 0

Views: 41

Answers (1)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

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)

Upvotes: 1

Related Questions