css - как удалить унаследованный стиль

Question

См. Это: http://jsfiddle.net/ymSpY/. Если вы видите, что <td> имеет внутренний стол. Внутренняя таблица наследует стиль от родительской таблицы. Внутренняя таблица имеет границы. Как я могу сделать границу невидимой или удалить ее? Как вы видите разметку внутренней таблицы, она имеет style="border-collapse: collapse;", и я даже попробовал border=0, но это не сработает. Граница внутреннего/детского стола все еще существует.

Answer 1

я бы, вероятно, создать отдельный класс для дочерней таблицы, но мало того, что, вот одно решение:

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

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

EDIT: вот один с классом, определенным для дочерней таблицы, это может дать вам больше гибкости после того, как вы начнете добавлять другие элементы в свою основную таблицу данных. http://jsfiddle.net/ymSpY/11/

Answer 2

Вы могли бы применить свои правила только для непосредственных детей:

.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 превратится в кудзу.

Демо: http://jsfiddle.net/ymSpY/10/

Answer 3

Я запутался. Вы изменили цвет, для границ, так почему бы вам просто не установить вместо них 0?

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

Пример http://jsfiddle.net/ymSpY/4/