• Type: Bug
• Resolution: Fixed
• Priority: Minor
• Fix Version/s: 3.3.2, 3.4
• Affects Version/s: 3.4
• Component/s: None
• Labels:

  None
• Environment:

  Chrome

1. 

   bonfire-screenshot-20120705-163148-371.png

   166 kB

   05/Jul/12 16:31

[CMS-3681] I cannot apply a different style on a table which is inside an other one.

Collapse comment: Laurence Aumeunier added a comment - 23/Jul/12 11:16

Laurence Aumeunier added a comment - 23/Jul/12 11:16

Use a > selector to apply style only on direct children:

table.datastrong > tbody > tr > th {
 ...
}

Note that the > selector is not supported by IE6 browser.

Expand comment: Laurence Aumeunier added a comment - 23/Jul/12 11:16

Laurence Aumeunier added a comment - 23/Jul/12 11:16 Use a > selector to apply style only on direct children: table.datastrong > tbody > tr > th { ... } Note that the > selector is not supported by IE6 browser.

Collapse comment: Laurence Aumeunier added a comment - 23/Jul/12 11:02, Edited by Laurence Aumeunier - 23/Jul/12 11:03

Laurence Aumeunier added a comment - 23/Jul/12 11:02 - edited

This is a CSS issue, reproductible when apply the style "invisible", "normal" or "clear" on the second table.
The HTML is ok

<table class="datastrong">
   <tr>
      <td>
          <table class="invisible">
               ....
          </table>
      </td>
   </tr>
</table>

But in CSS the style datastrong is applied to all th and td children:

table.datastrong tr th {
    background-color: #006BB1;
    border-color: #FFFFFF;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

Expand comment: Laurence Aumeunier added a comment - 23/Jul/12 11:02, Edited by Laurence Aumeunier - 23/Jul/12 11:03

Laurence Aumeunier added a comment - 23/Jul/12 11:02 - edited This is a CSS issue, reproductible when apply the style "invisible", "normal" or "clear" on the second table. The HTML is ok <table class= "datastrong" > <tr> <td> <table class= "invisible" > .... </table> </td> </tr> </table> But in CSS the style datastrong is applied to all th and td children: table.datastrong tr th { background-color: #006BB1; border-color: #FFFFFF; color: #FFFFFF; font-weight: bold; text-align: center; }

Collapse comment: Laure Lopez added a comment - 23/Jul/12 10:54, Edited by Laure Lopez - 23/Jul/12 11:31

Laure Lopez added a comment - 23/Jul/12 10:54 - edited

How to reproduce it :

• create a table, I will call this table "TABLE1",
• create an other table in the first one, I will call this table "TABLE2",
• I apply on TABLE1 the style "strong",
• I apply on TABLE2 the style "invisible"

Behavior :

• TABLE1 has a strong appearence,
• TABLE2 has a strong appearence too.

Expected behavior :

• TABLE1 has a strong appearence,
• TABLE2 is invisible

However, the inverse works. I apply the style "invisible" on TABLE1 and the style "strong" on TABLE2, it works :

• TABLE1 is invisible,
• TABLE2 has a strong appearence.

Note that is not an issue specific to Chrome

Expand comment: Laure Lopez added a comment - 23/Jul/12 10:54, Edited by Laure Lopez - 23/Jul/12 11:31

Laure Lopez added a comment - 23/Jul/12 10:54 - edited How to reproduce it : create a table, I will call this table "TABLE1", create an other table in the first one, I will call this table "TABLE2", I apply on TABLE1 the style "strong", I apply on TABLE2 the style "invisible" Behavior : TABLE1 has a strong appearence, TABLE2 has a strong appearence too. Expected behavior : TABLE1 has a strong appearence, TABLE2 is invisible However, the inverse works. I apply the style "invisible" on TABLE1 and the style "strong" on TABLE2, it works : TABLE1 is invisible, TABLE2 has a strong appearence. Note that is not an issue specific to Chrome

Collapse comment: Laurence Aumeunier added a comment - 20/Jul/12 10:34

Laurence Aumeunier added a comment - 20/Jul/12 10:34

I can not reproduce. I insert a table in another table on Chrome, and change style of the table inside (header row, column row, table style, table width, ...), it works fine.
Please describe what you do and what is wrong.
Your screenshot suggests that it works well, I do not see what is wrong.

Expand comment: Laurence Aumeunier added a comment - 20/Jul/12 10:34

Laurence Aumeunier added a comment - 20/Jul/12 10:34 I can not reproduce. I insert a table in another table on Chrome, and change style of the table inside (header row, column row, table style, table width, ...), it works fine. Please describe what you do and what is wrong. Your screenshot suggests that it works well, I do not see what is wrong.