CODEWITHSUNDEEP
htmlcss
loyalflow
loyalflow

Reputation: 14919

Override parent tables border properties

My html is like:

<html class="t1">
<tr>
<td></td>
<td><table class="t2 grid"><tr><td></td></tr></table></td>
<td></td>
</tr>
</html>

In my CSS I have:

.t1
{
 display: table;
 width: auto; /* 885*/
 border-collapse: collapse;
 border: 1px solid #dddddd;
}
.t1 td
{
 border-collapse: collapse;
 border: 1px solid #dddddd;
}

.t2
{
 display: table;
 width: auto; /* 885*/
 border-collapse: collapse;

}
.t2 td
{
 border-collapse: collapse;

}

.t2 grid
{
            border-top:1px solid #eeeeee !important;
            border-bottom:1px solid #eeeeee !important;
            border-left: none !important;
            border-right: none !important;
}
.t2 grid td
{
            border-top:1px solid #eeeeee !important;
            border-bottom:1px solid #eeeeee !important;
            border-left: none !important;
            border-right: none !important;
}

Sorry I can't post my actual CSS or HTML, but that is the idea of it.

Now for some reason the parent tables grid lines are showing up on the right/left of each row in the inner table.

I'm looking at chrome and I can see the computed styles, and the parents styles are still in effect.

How can I fix this?

The problem is, the inner table now has a very strong outer border because the style (i think) is being applied 2 times.

Upvotes: 0

Views: 422

Answers (1)

Ryan Brodie
Ryan Brodie

Reputation: 6620

The problem is in how you're naming your CSS styles. It should be .t2.grid td not .t2 grid td.

Upvotes: 1

Related Questions