html - テーブル行の背景画像

Question

重複の可能性:
テーブル行の背景画像の問題を、クロムや複数セルのテーブルで解決できますか?

最初の行の背景として 1 つの画像を使用しようとしています。問題は、背景が全体としてではなく、各セルに個別に適用されることです。それを回避する方法はありますか？

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

ここに画像の説明を入力

編集: この問題は、Safari、Opera、および chrome でのみ発生します。IEはまだチェックしていません。

score 4 · Accepted Answer

各行に配置したい場合は、代わりにテーブルの背景にして、y 軸で繰り返してみませんか?

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

ところで、IE9、FF12 でコードをテストしました。これらは、1 行に 1 回画像を表示しています。しかし、Chrome 15 と Safari 5 は td ごとにそれを繰り返しています。

編集

最初の行にのみ表示したいので、背景位置を使用して、画像がテーブルの一番上にくるようにする必要があります (通常、最初の行はここにありますよね? :P)

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

score 2 · Accepted Answer

セルの幅はわかりませんが（可変ですか？）、テーブル要素はそのようにレンダリングされます。目的の効果を得るには、それらを別のものとして表示する必要があります。

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

ただし、td要素とth要素の幅を設定する必要があることに気付くでしょう。

デモを参照してください。