CSS Child selectors in IE7 tables
- by John
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>
