2

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

4

4 回答 4

6

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

.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/

于 2012-05-16T06:23:33.387 回答
2

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

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

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

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

于 2012-05-16T06:30:50.647 回答
1

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

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

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

于 2012-05-16T06:25:13.003 回答
0

假设您使用引导程序来设置您的 ui 样式，则此方法有效。

table.noborder td {
    border: none !important;
}

table.noborder td table.table td {
    border: 1px solid #dee2e6 !important;
}
于 2021-08-27T15:50:03.327 回答