6

基本的にこれと同じ問題があります-テキストには背景色が設定されており、テーブルセルにあります。テキストの背景色はテキストの後ろにあるだけで、テーブルセル全体を塗りつぶす必要はありません。

解決策は通常、テーブルセルにbgcolorを設定することです。違いは、これはこの特定のWebサイト全体の多くの場所で発生し、関連するすべてのテーブルセルの変更には非常に長い時間がかかることです。

質問は、CSSで次のいずれかを言う方法がありますか？

  1. テキストの背景色をテーブルセル全体に塗りつぶします（テキストがテーブルセルにある場合）。また.....
  2. テーブルセルにスタイルxのテキスト要素が含まれている場合、そのテーブルセルに背景色（一種の逆継承）を持たせますか？

PS：このサイトは元々IE6用に開発されたもので、IE6はすでにテーブルセル全体をテキストの背景色で塗りつぶしているため、最初は問題ありません。ただし、FFとIE7+の動作は異なります。

4

3 に答える 3

8

David Dorward が言ったように、CSS を使ってきれいにやりたいことを正確に行う方法はありませんが、いくつかの回避策を考えることができます...

あなたのhtmlが次のようなものであると仮定します（つまり、背景色のあるものだけがテーブルセルにある）：

<table>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td><span class="bg" >test</span></td>
    </tr>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td>test with longish string<br/> over two lines<td>
    </tr>
</table>

CSS に対してこれを行うことができます。

td { height: 100%;}
.bg { background-color: #f00; width: 100%; height: 100%; display: block; }

この単純な例では (少なくとも Firefox 3.5 では) 動作しますが、html の内容によっては他の副作用が生じる可能性があります。

編集：JavaScriptを介してハッキングしても問題ない場合の別のオプションは、次のようにjQueryを使用することです：

$(function() { $("td:has(span.bg)").addClass("bg"); });

これは上記の例の html/css で機能しますが、css クラスなどに合わせて変更する必要があることは明らかです。

于 2009-07-29T06:30:00.707 に答える
0

セル全体だけをカバーしたい場合は、CSS を使用する必要がない限り、CSS は必要ありません。

<table width="100" height="100" border="2">
<tbody>
<tr>
<td bgcolor='red'>This is Red</td>
</tr>
<tr>
<td bgcolor='blue'>This is Blue</td>
</tr>
</tbody>
</table>

FireFox と IE8 および 7 で動作します。テキストが表示されなくても、セル全体をカバーします。

于 2009-07-29T13:51:12.963 に答える
0

いいえ。

少なくとも現在の CSS には、ドキュメント内のその要素の開始タグの後に表示されるものに基づいて要素のスタイルを設定する方法がありません。そのため、コンテンツに基づいて要素のスタイルを設定することはできません。

于 2009-07-29T06:21:45.387 に答える