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

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

Пример кода 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 базовый - таблица с несколькими ячейками.

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


css background-image html-table tablerow
person Ya'el    schedule 08.06.2010    source источник
comment
У вас есть живой пример или какая-нибудь разметка/css?   -  person Kyle    schedule 08.06.2010
comment
Похоже, что Firefox — единственный браузер, который ведет себя так, как должен. Chrome, IE, Opera и Safari заставляют фоновое изображение перезапускаться в каждой ячейке, а не плавно перемещаться по всей строке. Эта проблема указана на code.google.com/p/chromium/issues. /detail?id=44361, но, похоже, это не будет исправлено.   -  person Chris McFarland    schedule 09.06.2010
comment
У меня отлично работает с Google Chrome 5.0.375.55 на Ubuntu 9.10. jsfiddle.net/pzjUt и что я вижу: img153.imageshack.us/img153/3521/resultm.png   -  person jackocnr    schedule 09.06.2010
comment
ОБНОВЛЕНИЕ: как ни странно, новая версия хрома (5.0.375.70) снова сломала это, так что теперь я получаю изображение, повторяющееся в каждой ячейке...   -  person jackocnr    schedule 16.06.2010

Ответы (3)


arrow_upward
11
arrow_downward

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

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

person jackocnr    schedule 16.06.2010

arrow_upward
4
arrow_downward

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

tr {float:left;}
person Aziz    schedule 04.08.2011
comment
работал на меня. решил проблему в хроме и сафари; не вызвал никаких проблем, как я вижу, в firefox и Internet Explorer (где изначальной проблемы не было) - person that0th3rGuy; 10.05.2012
comment
При применении этого исправления я теряю ширину всех столбцов. Будет работать, только если у вас есть предопределенная ширина!? - person blo0p3r; 28.06.2013
comment
@ blo0p3r Вы правы. Но это своего рода гибкий стиль: Посмотрите мой код - person yunzen; 08.07.2014
comment
В Chrome работает только в том случае, если в строке нет ячеек, для которых установлен фон. - person Rauli Rajande; 09.06.2015

arrow_upward
2
arrow_downward

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

tr {
  background-attachment: fixed;
}

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

person davidanton1d    schedule 02.11.2016
comment
Комментарий внизу помог мне, спасибо! - person Ecko; 01.03.2018