Menu
I'm trying to use the > CSS child selector in IE7, and it doesn't seem to work. I have nested tables. My outer table has a class name "mytable", and I want the td's of the outer table to show borders. I don't want the inner table td's to have borders.
I think I should be able to have CSS that looks like this:
.mytable { border-style: solid }
.mytable>tr>td { border-style: solid }
But the second line seems to have no effect. If I change the second line to make it less specific, it applies to all the td's - I see too many borders.
td { border-style: solid }
So I think it really is just an issue with the selectors. Pages like this suggest that IE7 should be able to do what I want. Am I doing something silly?
Here's the whole HTML file:
<html>
<head>
<style type="text/css">
.mytable { border-style: solid; border-collapse: collapse;}
td { border-style: solid; }
</style>
</head>
<body>
<table class="mytable">
<tr>
<td>Outer top-left</td>
<td>Outer top-right</td>
</tr>
<tr>
<td>Outer bottom-left</td>
<td>
<table>
<tr>
<td>Inner top-left</td>
<td>Inner top-right</td>
</tr>
<tr>
<td>Inner bottom-left</td>
<td>Inner bottom-right</td>
</tr>
<table>
</td>
</tr>
<table>
</body>
</html>
848
Besides using standards-compliant mode you have to write
.mytable>tbody>tr>td
because - even if it's not written explicitely - there is a tbody element in the DOM between the table and the tr.
187
According to multiple sources, the child selector (>) should work in IE7. You can by pass the problem by using the descendant selector (space) and reverting the style for all of the more deeply-nested elements:
.mytable { border-style: solid; border-collapse: collapse;}
.mytable tr td { border-style: solid; }
.mytable tr td td{ border-style: none; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
