CSS Imposta colore sfondo cella tabella utilizzando testo all'interno cella tabella

Question

Hanno praticamente lo stesso problema di this - il testo ha un colore di sfondo impostato e si trova in una cella di tabella. Il colore di sfondo del testo è solo dietro al testo e non riempie l'intera cella della tabella, che dovrebbe.

La soluzione è normalmente per impostare un bgcolor sulla cella della tabella. La differenza è che questo si verifica in molti luoghi in questo particolare sito Web e la modifica di tutte le celle della tabella pertinenti richiederebbe molto tempo.

domanda è, c'è un modo di dire in CSS, uno di:

1. rendere il colore di sfondo del testo riempire l'intera cella di una tabella (se il testo è in una cella di tabella); o .....
2. Se una cella di tabella contiene un elemento di testo che ha lo stile x, quindi rendere quella cella di tabella ha un colore di sfondo (un tipo di ereditarietà inversa)?

PS: il sito è stato sviluppato per IE6 in origine, e IE6 riempie già l'intera cella di una tabella con colore di sfondo del testo, in modo inizialmente senza problemi. FF e IE 7+ funzionano diversamente.

Answer 1

Come ha detto David Dorward, non c'è modo di fare esattamente ciò che si desidera in modo pulito con i CSS, ma mi viene in mente un paio di soluzioni alternative ...

Supponendo tuo html è qualcosa di simile (vale a dire la cosa con il colore di sfondo è l'unica cosa nella cella della tabella):

<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> 

si potrebbe fare questo alla tua CSS:

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

Funziona in questo semplice esempio (almeno in firefox 3.5), ma potrebbe avere altri effetti secondari a seconda di quale sia il contenuto del tuo html.

---

Edit: Un'altra opzione se sei ok con l'hacking via javascript, è quello di utilizzare jQuery come questo:

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

Questo funziona su quanto sopra esempio html/css, ma sarebbe ovviamente bisogno di essere cambiato per abbinare i vostri classi CSS, ecc

Answer 2

No.

CSS, attualmente, almeno, non ha alcun modo per lo stile di un elemento in base a tutto ciò che appare dopo il tag di apertura per questo elemento nel documento. Quindi non puoi disegnare un elemento in base al suo contenuto.

Answer 3

Beh, se si desidera solo un intera cella coperto, questo non richiede i CSS, a meno che non si desidera utilizzarlo:

<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> 

Funziona in FireFox e IE8 e 7. Copre l'intera cella anche se il testo non lo fa.