Можем ли мы решить проблему с фоновым изображением строки таблицы, в chrome, в многоклеточных таблицах?

Question

Часто спрашивают - но я еще не нашел хорошего ответа (и я посмотрел). Если вы установите фоновое изображение в CSS для строки таблицы - изображение будет повторяться в каждой ячейке. Если вы установите position: relative (для строки) и установите background-image: none (для ячеек), это решит проблему в IE, но не в Chrome! Я не могу использовать фоновое позиционирование, так как звонков много, а их размер варьируется. (И картинка не симметрична - это затухание с одной стороны. Кто-нибудь ??

Пример для кода CSS:

tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }

HTML является базовым - таблица из нескольких ячеек.

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

Answer 1

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

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

Answer 2

Добавить float: слева от строки, это должно исправить.

tr {float:left;}

Answer 3

Протестировано в Chrome 54 на Windows 10:

tr {
  background-attachment: fixed;
}

Хотя кажется, что это не без ошибок - фоновое изображение повторяется только во всем окне просмотра во время загрузки, что означает, что ячейки, которые появляются при прокрутке вниз, не имеют фона.