样式特定表而不影响每个表

时间:2017-04-21 13:38:01

标签: css

我的一张桌子有以下css:

.customer-table tr, td, th {
    border: 2px solid black;
}

一切看起来都非常均匀美丽。 enter image description here 但是,当我像这样写我的CSS时,我的网站上的所有表都受到这个样式表的影响,并且它们有2px宽的黑色边框。
然后我试着像这样改变我的CSS:

table.customer-table {
    border: 2px solid black;
}

tr.customer-table {
    border: 2px solid black;
}

td.customer-table {
    border: 2px solid black;
}

th.customer-table {
    border: 2px solid black;
}

并为每个表元素提供了这个CSS类。现在桌子全都搞砸了。 enter image description here

为什么一些细胞的空间现在有所不同?

1 个答案:

答案 0 :(得分:3)

我会做这样的事情。现在,thtrtd 必须成为类.customer-table的元素的后代。

.customer-table th,
.customer-table tr,
.customer-table td {
    border: 2px solid black;
}

您的第一个示例定位了包含.customer-table类,任何th,任何tr和任何td的所有元素。 thtrtd未被.customer-table“作用域”,并且可以自由地影响页面上的任何相似元素

就单元格的间距而言,我们需要查看完整的CSS和一些标记。根据您的屏幕截图,我可以看到您还没有共享的其他样式应用于您的表格元素。