Ошибка Google Chrome с фоном tr

Question

Я пытаюсь установить фоновое изображение для строки таблицы, но фон применяется ко всем его дочерним элементам td.

В IE7 есть та же ошибка, но она решается с помощью

tr {
    position: relative;
}

Любой намек на это?

Спасибо

Answer 1

Это работает для меня во всех браузерах:

tr {
background: transparent url(/shadow-down.gif) no-repeat 0% 100%;
display: block;
position: relative;
width: 828px;
}

tr td{
background: transparent;
}

Answer 2

В тег tr tr входят Style='Display:inline-table;' Отлично работает во всех браузерах.

Answer 3

Chrome (WebKit) переопределяет положение: относительно строк таблицы и вычисляет стиль как статический. Ошибка или функция - это предотвращает положение: относительное исправление, как используется в IE7.

Решение при использовании фиксированных (известных) размеров ячеек: tr { поплавок слева ; }

И добавьте соответствующие размеры ячеек ко всем ячейкам таблицы (с помощью классов или встроенных стилей). Я также добавил размеры строк, однако это может не потребоваться для работы решения.

Мне не нужно решение для динамических размеров ячеек, поэтому я не изучал этот вариант использования.

Answer 4

Потратил два дня на эту проблему, наконец нашел ответ здесь:

Вам необходимо установить:

background-attachment: fixed;

Не уверен, почему моды удаляют этот ответ, его нет на странице.

Answer 5

Ни один из упомянутых обходных путей не помог мне. Вот что я закончил:

TABLE TBODY.highlight {
    background-image: url(path/image.png);
}

TABLE>* {
    float: left;
    clear: both;
}

Проверено только в Chrome и Firefox, поэтому не знаю, как это работает в IE (не важно в моем случае), но для меня это работает безупречно!

Answer 6

То, что я закончил, было:

table.money-list tr {
background: url(images/status-2.gif) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/
    table tbody tr td:first-child {
    background-image: none;
    background-color: transparent;
}

table tr td{
    background-color: #FFFFFF;
}
}

Итак, как вы можете видеть, просто установите цвет фона для каждого TD, кроме первого, и целевого Webkit.

Answer 7

Это должно исправить tr фон для Chrome и FF:

table.header_table tr#row_1 {    
    display:flex;
}

Answer 8

попробуйте добавить:

td{white-space: nowrap}

Может помочь в некоторых ситуациях.

Answer 9

Вот мое решение jQuery. Это для thead tr, но должно работать и для tbody tr.

    $(document).ready(function () {
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit)
    if ($.browser.webkit) {
        $('thead tr').each(function (i) {
            var theadWidth = $(this).width()-1;
            $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>');
        });
    }
});

Вы можете проверить это в Chrome / Firefox / IE9. Он должен выглядеть так же.

Answer 10

Я бы порекомендовал установить фоновое изображение для ячеек таблицы напрямую, сместив положение фона всех последующих ячеек влево, чтобы оно выглядело так, как должно. Таким образом, вам не нужно нарезать фоновое изображение.