Question

请参阅：http://jsfiddle.net/ymSpY/。如果你能看到<td>有一个内表。内部表继承父表的样式。内表有边框。如何使边框不可见或将其删除？正如您可以看到内部表的标记style="border-collapse: collapse;"，我甚至尝试border=0但它不起作用。内/子表的边框仍在那里。

Answer 1

您只能将您的规则应用于直系孩子：

.dataTable > thead, 
.dataTable > thead > tr > th, 
.dataTable > tbody, 
.dataTable > tbody > tr > td {
    padding:       2px;
    border-top:    1px solid #F5F2EF;
    border-left:   1px solid #F5F2EF;
    border-bottom: 1px solid #F5F2EF;
    border-right:  1px solid #F5F2EF;
}

这样，边界规则不会渗透到嵌套表中。唯一的另一种选择是进行大量的重置，这将很快导致你的CSS变成kudzu。

演示：http://jsfiddle.net/ymSpY/10/

Answer 2

我可能会为子表创建一个单独的类，但除此之外，这是一个解决方案：

.dataTable td table, .dataTable td table tbody, .dataTable td table td {
    border:none;
}

http://jsfiddle.net/ymSpY/6/

编辑：这是一个为子表定义的类，一旦开始向主数据表中添加其他元素，这可以为您提供更大的灵活性。 http://jsfiddle.net/ymSpY/11/

Answer 3

我很困惑。您已经更改了边框的颜色，那么为什么不将它们设置为0呢？

.dataTable td table td {
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
}

示例http://jsfiddle.net/ymSpY/4/

css - 如何删除继承的样式

3 个答案: