CSS not applied on nested HTML tables

Question

While I was trying to deal with nested tables using javascript, I got stuck. My css style tr.odd is not getting applied on odd rows after I changed it. When I tried to debug, my innermost table structure itself is not there. Also no exceptions during run time. Previous code was working perfectly. Because of some margin issue, I changed a bit of code on odd rows by creating table inside the existing table, and now CSS style is not getting applied.

CSS:

tr.odd
{
background-color:#f3f4f5;
\-webkit-font-smoothing: antialiased;
font-weight: normal;
margin: 10px 20px;
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}

Previous Script (Working):

if(line%2==0)
                 $(obj).find('#abc tr:last').after("<tr class='odd'><td><i class='fa fa-building-o'> <b class='companyName' id='oddEmpName'>"+emp+"</b><br/><i class='fa fa-briefcase'> "+eventName+"</br><i class='fa fa-cubes'> "+ind+"</br><i class='fa fa-map-marker'> "+loc +"</td></tr>");
             else
                 $(obj).find('#abc tr:last').after("<tr class='even'><td><i class='fa fa-building-o'> <b class='companyName'id='evenEmpName'>"+emp+"</b><br/><i class='fa fa-briefcase'> "+eventName+"</br><i class='fa fa-cubes'> "+ind+"</br><i class='fa fa-map-marker'> "+loc +"</td></tr>");

Current Script (Not Working):

if(line%2==0)
                 $(obj).find('#abc tr:last').after("<tr class='odd'>" +
                        "<table>" +
                            "<tbody>" +
                                "<tr>" +
                                    "<td><i class='fa fa-building-o'></td>" +
                                    "<td>"+emp+"</td>" +
                                "</tr>" +
                                "<tr>" +
                                    "<td><i class='fa fa-briefcase'></td>" +
                                    "<td>"+eventName+"</td>" +
                                "</tr>" +
                                "<tr>" +
                                    "<td><i class='fa fa-cubes'></td>" +
                                    "<td>"+ind+"</td>" +
                                "</tr>" +
                                "<tr>" +
                                "   <td><i class='fa fa-map-marker'></td>" +
                                    "<td>"+loc+"</td>" +
                                "</tr>" +
                            "</tbody>" +
                        "</table>" +
                    "</tr>");
             else
                 $(obj).find('#abc tr:last').after("<tr class='even'><td colspan='2'><i class='fa fa-building-o'> <b class='companyName'id='evenEmpName'>"+emp+"</b><br/><i class='fa fa-briefcase'> "+eventName+"</br><i class='fa fa-cubes'> "+ind+"</br><i class='fa fa-map-marker'> "+loc +"</td></tr>");

try only „.odd”, or „tr.odd, tr>tr.odd” in css selector — cox
– cox, Commented Mar 4, 2015 at 9:39
As I said, there is no problem with CSS as it was working previously. Also when I debugged, I found innermost table tags missing. — Pratik
– Pratik, Commented Mar 4, 2015 at 9:42

Jai · Accepted Answer · 2015-03-04 09:43:26Z

1

What you are doing is invalid.

Because a table should be put inside of td but you are putting it in tr.

Try adding this:

$(obj).find('#abc tr:last').after("<tr class='odd'><td>" +
                                   "<table>" + 
                                     // other code as is.
                                   + "</table>" + "</td></tr>");

answered Mar 4, 2015 at 9:43

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pratik Over a year ago

Can you just tell. After this, CSS is being applied, but $(obj).find('#abc tr:last') seems not returning any element. Any changes I can do in that?

Collectives™ on Stack Overflow

CSS not applied on nested HTML tables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related