2012-05-09 10 views
8

可能性の重複:
Can we solve the table row background image problem, in chrome, in multi celled tables?テーブル行の背景画像

は、私が最初の行の背景として一つの画像を持ってしようとしています。問題は、背景が全体としてではなく、別々に各セルに適用されることです。その周りに道がありますか?

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

結果は次のようになります。

enter image description here

EDITを:問題がサファリ、オペラとクロームに表示されます。まだIEをチェックしていない。

+0

[この件に関する投稿への回答](http://stackoverflow.com/a/3052686/547020)をご覧ください。そこに多くの(stackoverflow上)がありますが、これは有望に見えます。 –

+1

あなたのJSフィドルでは、Firefox/Chromeで、そのように見えます。どのブラウザを使用していますか? –

+0

@DavidThomas興味深い...私はSafariを使用しています。 – domino

答えて

4

各行に表示したい場合は、代わりにテーブルの背景にして、それをy軸で繰り返すのはいかがですか?

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

私はあなたのコードをIE9、FF12でテストしました。それらは行ごとに1回イメージを表示しています。しかし、Chrome 15 & Safari 5は各tdを繰り返しています。 ?あなたが唯一の最初の行でそれを望んでいたので

編集

は、あなたが最初の行は、右、ここでそれは普通だ(画像は、テーブルの上にとどまることを確認するためのbackground-positionを使用する必要があります。 P)

+0

私は最初の行の背景だけが必要です。 – domino

+0

ノーリピート – rlemon

+0

@dominoは最初の行だけを保持しますか? Lemmeは私の答えを更新します... – Ozzy

2

セルの幅はわかりません(変数は変わりますか?)が、テーブル要素はそのままレンダリングされます。所望の効果を得るために、彼らは何か他のもののように表示する必要があります

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

あなたは今あなたがが、TDと番目の要素のための幅を設定する必要があること、わかります。

Demoを参照してください。

+0

ありがとう、今私は2つの解決策があります。 – domino