Why border of not showing in IE?

Question

Why border of tfoot tr:first-child not showing in IE. I'm checking in IE7.

font-weight:bold; background:yellow is showing in IE but border not

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table tfoot tr:first-child {
    font-weight:bold;
    background:yellow;
    border-top:2px solid red; 
    border-bottom:2px solid red;
}

HTML

<table cellpadding="0" cellspacing="0">
 <thead>
  <tr>
   <th align="left" scope="col">XXXX</th>
   <th align="right" scope="col">XXXX</th>
   <th align="right" scope="col">XXXX</th>
   <th align="right" scope="col">XXXX</th>
  </tr>
 </thead>
  <tfoot>
  <tr>
   <td colspan="3">XXXX</td>
   <td align="right">XXX</td>
  </tr>
   <tr>
   <td colspan="4">XXX</td>
   </tr>
 </tfoot>
 <tbody>
  <tr>
   <td align="left">XXXX</td>
   <td align="right">XXXX</td>
   <td align="right">XXXX</td>
   <td align="right">XXXX</td>
  </tr>
 </tbody>
</table>

update:

i'm using this doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

@fmark: Stack Overflow and Doctype are run by different companies. It is perfectly fine and normal for this question to be here. — animuson, May 14 '10 at 06:49
have you checked other browsers? i'm pretty sure that TR doesn't support borders... just set your TDs to accept borders — Jason, May 14 '10 at 07:11
@Jason it does properly work in FF, Chrome and IE (after adding a DOCTYPE) under Win and Linux (IE not under Linux of course!). — nico, May 14 '10 at 07:22

score 5 · Accepted Answer · answered May 14 '10 at 13:55

I would avoid styling tr elements because they don't really "exist" as such, apart from for semantic reasons. You're better off targeting the table cells themselves, with something like this:

table tfoot tr:first-child th,
table tfoot tr:first-child td {
    font-weight:bold;
    background:yellow;
    border-top:2px solid red; 
    border-bottom:2px solid red;
}

Also, since you are targeting directly nested elements, you can use the child selector, which is faster for browsers to parse (they only have to search one level up/down).

table > tfoot > tr:first-child > th,
table > tfoot > tr:first-child > td {
    ...
}

score 4 · Answer 2 · answered May 14 '10 at 06:55

http://www.w3schools.com/css/pr_pseudo_first-child.asp

Note: For :first-child to work in IE, a DOCTYPE must be declared

Add something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And it should work

score 0 · Answer 3 · answered Feb 26 '14 at 07:04

0

Give position as relative for tr class, which will fix.

tfoot tr {position:relative; border-bottom:solid 1px #ccc; }

answered Feb 26 '14 at 07:04

Nikesh Ponnen

399
1
2
10

Why border of not showing in IE?

3 Answers3

Linked