Фоны и z-индекс с таблицами и переполненными разделами

#css

Вопрос:

Я пытаюсь выяснить, как заставить это работать. Разве background: red для td внешней таблицы не должен перезаписывать все остальные? И почему в этом примере в конечном итоге получается желтый фон, хотя это элемент, вложенный дальше всего в DOM?

 <style type="text/css">
    table, td, div {
    height: 200px;
    width: 400px;
}
</style>

<table class="outer" cellpadding="0" cellspacing="0">
<tr>
    <td style="background: red">
    <div style="overflow:auto;background:green">
    <table class="inner" style="width:800px">
        <tr>
            <td style="background:yellow"></td>
        </tr>
    </table>
    </div>
    </td>
</tr>
</table>

Вот JSFiddle для этого.

В заключение… Я пытаюсь перезаписать цвет фона внутренних ячеек таблицы фоном в родительском div, а также родительским td внешней таблицы. Возможно ли это вообще?

1. Каскад не применяется к дереву DOM. Если у вас есть раздел с зеленым цветом bgcolor над другим с красным цветом bgcolor, красный цвет не заменит зеленый. Это не CHTML. Это селектор, который делает трюк, но поскольку сам td имеет объявленный стиль, вы не можете переопределить его ничем, кроме Javascript или редактирования самого HTML.

Ответ №1:

последнее слово остается за фоном в Td. таким образом, вы технически не можете сделать это с помощью одного css. даже если вы добавите !important в стиле div, это не сработает. в любом случае, вы, вероятно, можете исправить это с помощью js и заменить цвет td на другой.

1. да, я уже пробовал !важно — не работает. к сожалению, решение на javascript не будет работать, поскольку я не могу избавиться от «желтого» фона. мне просто нужно поместить какой-нибудь другой фон (на самом деле это изображение) сверху…

2. можете ли вы добавить в это немного html? или вы можете просто повозиться с css?

3. хорошо, это круто, потому что вы всегда можете установить размер желтого TD равным нулю и вставить в него новый div, который содержит все, что вам нужно, в этом случае к TD не должно применяться какое-либо правило переполнения, чтобы заставить thinksработать

Ответ №2:

сохраняйте поведение css по умолчанию, если вы задаете стиль родительскому тегу, тогда он автоматически наследуется дочерним html

если вам нужен другой css в дочернем теге, чем вам нужно, вам нужно придать стиль этому конкретному тегу, который переопределяет ваш родительский стиль

Ответ №3:

Второй td всегда рисуется выше и, следовательно, поверх фона первого td . Поскольку вы используете style атрибут, который всегда имеет приоритет над любым CSS, применяемым в style блоке или внешнем файле CSS, вы не сможете изменить это поведение, не прибегая к JavaScript или не перемещая стили из style атрибута в style блок.

Используя jQuery, вы могли бы достичь этого с помощью чего-то подобного следующему:

 $('.inner td').css({
    'background' : 'colour or image here' 
});