All geek questions in one place

CSS child selectors in IE7 tables

I am trying to use the child> CSS selector in IE7 and it does not seem to work. I have nested tables. My outer table has a class name of "mytable" and I want the td of the outer table to display the borders. I do not want the internal td table to have borders.

I think I should have CSS that looks like this:

.mytable { border-style: solid } .mytable>tr>td { border-style: solid }

But the second line does not seem to have any effect. If I change the second line to make it less specific, it applies to all td - I see too many borders.

 td { border-style: solid }

So, I think this is really a problem with selectors. Pages such as this suggest that IE7 should do what I want. Am I doing something stupid?

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>
+4
source share
5 answers

According to several sources, the child selector (>) should work in IE7. You can convey the problem by using the child selector (space) and returning the style for all more deeply nested elements:

 .mytable { border-style: solid; border-collapse: collapse;} .mytable tr td { border-style: solid; } .mytable tr td td{ border-style: none; }
+3
source

In addition to using standard mode, you should write

 .mytable>tbody>tr>td

because - even if it is not written explicitly - in the DOM there is a tbody element between table and tr .

+5
source

Actually, its possible, your code may not contain the "tbody" element, but it still exists.

The correct css selector would be:

 .mytable > tbody > tr > td { border-style: solid }
+2
source

If by: ' .mytable>tr>td ' you want to say "td, which is a child of tr, which is a child of .mytable", then you do not need it at all.

Have you tried this without?

 .mytable tr td {}

should do what you are looking for (if I understand your question correctly)

+1
source

It is also worth noting that if your doctype is not installed, you may also encounter this problem. Make sure you have doctype on line 1. I had an html comment on line 1 right above doctype, and this caused IE7 to crash.

Works:

 <!doctype html>

Does not work:

 <!-- Comment --> <!doctype html>
+1
source

Source: https://habr.com/ru/post/1308850/

More articles:


All Articles