Home/ Questions/Q 8261117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T03:17:30+00:00

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>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0