Bug 20799

Summary:

Formatting <TD> with CSS only in the first deeper level

Product:

WebKit

Reporter:

Rüdiger Cordes <rc>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED WONTFIX

Severity:

Normal

CC:

tabatkins

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac

OS:

OS X 10.4

URL:

none

Attachments:

Description	Flags
Working with table class=a	none
Not working with table	none

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.