Border Color on tr is not applying on IE-7

Question

I am finding an issue which is specific with IE-7. Working on FF, Chrome, IE 8/9. The issue is that IE 7 is not honoring border color on tr. Any workaround in CSS, Jquery, Javascript appreciated. http://jsfiddle.net/VW84N/

Fabrizio Calderan · Accepted Answer · 2012-04-04T09:53:13.073

1

a simple workaround: http://jsfiddle.net/fcalderan/VW84N/4/ without borders on <tr>

just use this CSS

table { border-right: 1px red solid; border-left: 1px red solid; }
td { border-bottom: 1px red solid; }
tr:first-child td { border-top: 1px red solid;  }

edited Apr 04 '12 at 09:53

answered Apr 04 '12 at 09:42

Fabrizio Calderan

120,726
26
164
177

Thanks. your link does not work. But your code look like works for me. – Imran Qadir Baksh - Baloch Apr 04 '12 at 09:46
I need to apply this on specific rows of table. – Imran Qadir Baksh - Baloch Apr 04 '12 at 09:57
@user960567 then see if this other discussion can be useful: http://stackoverflow.com/questions/9923424/how-to-fix-inconsistent-rendering-of-adjacent-td-borders-when-they-are-collapsed/9924239#9924239 otherwise provide a fiddle with clear specification – Fabrizio Calderan Apr 04 '12 at 10:00

score 1 · Answer 2 · answered Apr 04 '12 at 09:43

1

Sadly, but true: that's totally IE.

I've been using the workaround described here:

http://csarven.ca/tr-border-trick-for-ie

answered Apr 04 '12 at 09:43

Khôi

2,133
11
10

Jon · Answer 3 · 2012-04-04T09:48:11.823

0

This is a well-known issue. As a workaround, apply the border to the table cells instead of the row itself.

For example, an easy solution is to do:

table { border-collapse: collapse; border-spacing: 0 } /* you have to do this */
table { border: 1px solid red } /* borders around the whole table */
table tr + tr td { border-top: 1px solid red } /* borders between rows */

See it in action.

edited Apr 04 '12 at 09:48

answered Apr 04 '12 at 09:42

Jon

428,835
81
738
806

But this will affect the sides of each td as well. – Imran Qadir Baksh - Baloch Apr 04 '12 at 09:46
@user960567: I just finished updating with a working example. You don't have to add side borders if you don't want to. – Jon Apr 04 '12 at 09:47
I need to apply this on specific rows of table. – Imran Qadir Baksh - Baloch Apr 04 '12 at 09:57

score 0 · Answer 4 · answered Apr 04 '12 at 09:44

0

did you try

<tr style="border-color:yourcolor"><td>....</td></tr>

answered Apr 04 '12 at 09:44

bassem ala

181
1
13

Border Color on tr is not applying on IE-7

4 Answers4