wiersz tabeli tła

Question

Powiel możliwe:
Can we solve the table row background image problem, in chrome, in multi celled tables?

Staram się mieć jeden obraz jako tło dla pierwszego rzędu. Problem polega na tym, że tło zostaje zastosowane do każdej komórki osobno, a nie jako całość. Czy jest jakiś sposób obejścia tego?

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

Wynik powinien wyglądać mniej więcej tak:

EDIT: Problem pojawia się tylko w Safari, Opera i Chrome. Nie sprawdziłem jeszcze IE.

Answer 1

Jeśli chcesz go w każdym wierszu, dlaczego nie ustawić go jako tła tabeli i powtórzyć w osi Y?

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

BTW Przetestowałem Twój kod za pomocą IE9, FF12 - wyświetlają obraz raz w rzędzie. Ale Chrome 15 & Safari 5 powtarza to dla każdego td.

Edit

Skoro tylko chciał go w pierwszym rzędzie, należy użyć background-position, aby upewnić się, że obraz pozostaje na szczycie tabeli (to zwykle gdzie pierwszy rząd jest, prawda?: P)

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

Answer 2

nie wiem o twoich szerokości komórek (są zmienne?), ale elementy tabeli renderowanie jako takie. Dla uzyskania pożądanego efektu, muszą one być wyświetlane jako coś innego:

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

można zauważyć, że teraz trzeba ustawić szerokość dla TD i Th elementów, choć.

Zobacz Demo.