Как предотвратить передачу атрибутов CSS внутренним элементам?

Question

Я создаю 3 таблицы.

<table id="first">
    <tr>
        <td>
        1. CAPTION
        </td>
    </tr>
    <tr>
        <td>
            <table id="second">
                <tr>
                    <td>
                        2. CAPTION
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table id="third">
                <tr>
                    <td>
                        3. CAPTION
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Я хочу добавить отступы 10px (padding-top: 10px) для основных элементов таблицы td.

#first tr td
{
    padding-top: 10px;
    padding-left: 0pt;
}

Но это заполнение добавляет к внутренним таблицам элементы td.

Как я могу запретить передавать настройки padding-top во внутренние таблицы?

Answer 1

Использование #first > tr > td.

Это означает, что "td является прямым дочерним элементом tr, который является direct дочерним элементом с идентификатором 'first'".

Answer 2

Есть 2 решения.

Один (трудный путь), Укажите значения отступов для внутренних дочерних элементов, чтобы они переопределяли спецификации родительского стиля.

Два (вышеуказанный метод), Используйте '#first> tr> td' но это приводит к проблемам кроссбраузерности.

ie-6 имеет большую долю на рынке браузеров.