строка таблицы фоновое изображение

Question

Можно создать дубликат:
Can we solve the table row background image problem, in chrome, in multi celled tables?

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

http://jsfiddle.net/bumpy009/c3txj/

Результат должен выглядеть примерно так:

EDIT: Проблема появляется только в Safari, Opera и хром. Еще не проверял IE.

Answer 1

Если вы хотите, чтобы он проходил через каждую строку, почему бы не сделать это вместо фона таблицы и повторить его по оси y?

table { 
    width: 300px; 
    background-image: url('mypic.jpg'); 
    background-repeat: repeat-y; 
} 

BTW Я проверил ваш код с помощью IE9, FF12 - те, которые отображают изображение один раз в строке. Но Chrome 15 & Safari 5 повторяет его для каждого td.

Редактировать

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

table { 
    width: 300px; 
    background-image: url('mypic.png'); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

Answer 2

Я не знаю о ширине вашей ячейки (переменные?), Но элементы таблицы визуализируются как таковые. Для получения желаемого эффекта, они должны быть отображены как что-то другое:

tr {display: block;} 
td, th {display: inline-block; background: transparent;} 

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

См. Demo.