Question

我的HTML就像：

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

在我的CSS中我有：

.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;
}

抱歉，我无法发布我的实际CSS或HTML，但这就是它的想法。

现在由于某种原因，父表格网格线显示在内部表格中每行的右侧/左侧。

我正在看chrome并且我可以看到计算出的样式，并且父样式仍然有效。

我该如何解决这个问题？

问题是，内部表现在有一个非常强大的外边框，因为样式（我认为）被应用了2次。

Answer 1

问题在于你如何命名CSS样式。它应该是.t2.grid td而不是.t2 grid td。

覆盖父表边框属性

1 个答案: