Сохранять границы таблицы, предшествующие предыдущему стилю

Question

Я не очень хорошо разбираюсь в CSS, может кто-нибудь сказать мне, как я могу переопределить стиль, чтобы ячейка, называемая «Существующие ценовые разрывы», сохранила ее левую границу? Точно так же один ниже будет делать то же самое, разделяя контент. Но остальная часть заголовка должна оставаться без них, как сейчас.

Вот скрипка: http://jsfiddle.net/kacpr/YkL5j/2/

Это часть я хотел бы переопределить на уровне «клетка»:

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

Answer 1

Это не кажется, правильным способом использования CSS селекторов, но вот возможное решение (нет класса для ячейки, так что мы используем «: п-й ребенок()» в качестве примера:

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