Bug 20799 - Formatting <TD> with CSS only in the first deeper level
Summary: Formatting <TD> with CSS only in the first deeper level
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.4
: P2 Normal
Assignee: Nobody
URL: none
Keywords:
Depends on:
Blocks:
 
Reported: 2008-09-12 10:58 PDT by Rüdiger Cordes
Modified: 2011-10-21 03:45 PDT (History)
1 user (show)

See Also:

Attachments
Working with table class=a (361 bytes, text/html)
2011-10-21 03:37 PDT, Rüdiger Cordes 		no flags Details
Not working with table (351 bytes, text/html)
2011-10-21 03:39 PDT, Rüdiger Cordes 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Rüdiger Cordes 2008-09-12 10:58:31 PDT 
I have a table in a table and want to format only the first level of <td>s.

Surprisingly it doesnt work in Safari and Firefox 3 either.

Here is the code:

<HTML>
 <HEAD>
  <STYLE type="text/css">
   table.m td        {border:1px solid #F00}
   table.n > td      {border:1px solid #0C0}
   table.o  * > td   {border:1px solid #B0B}
   table.p tr > td   {border:1px solid #B0B}
   table.q >  * > td {border:1px solid #00F}
   table.r > tr > td {border:1px solid #00F}
   table.s > > td    {border:1px solid #0C0} //strange but last idea ;-)
  </STYLE>
 </HEAD>
<BODY>
<TABLE class=m>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
<TABLE class=n>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
<TABLE class=o>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
<TABLE class=p>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
<TABLE class=q>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
<TABLE class=r>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
<TABLE class=s>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
</BODY>
</HTML>
Comment 1 Rüdiger Cordes 2008-09-12 11:16:33 PDT 
To have something that works:

<HTML>
 <HEAD>
  <STYLE type="text/css">
   table.m td        {border:1px solid #F00}
   table.m td td     {border:1px solid #FA0}
  </STYLE>
 </HEAD>
<BODY>
<TABLE class=m>
 <TR>
  <TD>
   <TABLE><TR><TD>innere Tabelle</TD></TR></TABLE>
  </TD>
  <TD>Text</TD>
 </TR>
</TABLE>
</BODY>
</HTML>
Comment 2 Tab Atkins 2011-10-20 19:57:37 PDT 
HTML automatically "repairs" tables by wrapping bare <tr>s into a <tbody>, which is why your .r selector didn't work.  So the selector you want is "table > tbody > tr > td".
Comment 3 Rüdiger Cordes 2011-10-21 03:37:24 PDT 
Created attachment 111932 [details]
Working with table class=a

When the higher table has a class its working
Comment 4 Rüdiger Cordes 2011-10-21 03:39:05 PDT 
Created attachment 111935 [details]
Not working with table

When the higher table has no class its not working
Comment 5 Rüdiger Cordes 2011-10-21 03:45:51 PDT 
What when the higher table has no class the problem persists.