Question

我对CSS没有很好的经验，有人可以告诉我如何覆盖样式，以便一个名为“现有价格突破”的单元格保留它的左边界？类似地，下面的一个将做同样的事情，分割内容。但是标题的其余部分应该没有它们，就像现在一样。

这是小提琴：http://jsfiddle.net/kacpr/YkL5j/2/

这是我想在'单元'级别上覆盖的部分：

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}

Answer 1

这似乎不是使用CSS选择器的正确方法，但这是一个可能的解决方案（没有单元格的类，所以我们使用“：nth-child（）”作为示例：

.table > thead > tr > td:nth-child(4) {
    border-left: 1px solid #ff0000;
}

http://jsfiddle.net/YkL5j/3/

如果您需要向后兼容浏览器，则可能需要为所选单元格指定一个类：.existingPriceBreaks {}

使用CSS选择器的更好方法可能是：

.table tr td:nth-child(4) {}
.table tr td.existingPriceBreaks {}

...除了你打算出于某种原因使用嵌套表...

Answer 2

您可以使用一个类，例如leftBordered覆盖公共边界定义，如：

/* in html */
<tr>
  <td>Currency</td>
  <td style="font-weight: normal;">EUR</td>
  <td></td>
  <td colspan="2" class="leftBordered">Existing price breaks</td>
  <td colspan="3">New price breaks</td>
</tr>
/* must be applied to all td-fields, that need to be changed */

/* in css */
table > thead > tr > td.leftBordered { 
  border-left: 1px solid #ccc;
}

在此处查看工具示例的小提琴：http://jsfiddle.net/YkL5j/5/

保留表格边框覆盖以前的样式

2 个答案: