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</t开发者_JS百科d>
<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">
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 {
...
}
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
Give position as relative for tr class, which will fix.
tfoot tr {position:relative; border-bottom:solid 1px #ccc; }
精彩评论