CSS Establecer color de fondo de celda de tabla utilizando texto dentro de la celda de tabla

Question

Tienen básicamente el mismo problema que this - el texto tiene un conjunto de colores de fondo y está en una celda de tabla. El color de fondo del texto solo está detrás del texto y no llena toda la celda de la tabla, lo cual debería ser.

La solución normalmente es establecer un bgcolor en la celda de la tabla. La diferencia es que esto ocurre en muchos lugares a lo largo de este sitio web en particular, y el cambio de todas las celdas de la tabla relevantes tomaría mucho tiempo.

La pregunta es, ¿hay una manera de decir en el CSS, ya sea de:

1. hacer que el color de fondo de texto llenar toda la celda de la tabla (si el texto está en una celda de la tabla); o .....
2. Si una celda de tabla contiene un elemento de texto que tiene un estilo x, entonces haga que esa celda de tabla tenga un color de fondo (un tipo de herencia inversa)?

PD: el sitio fue desarrollado para IE6 originalmente, y IE6 ya llena toda la celda de la tabla con el color de fondo del texto, por lo que inicialmente no hay problemas. FF e IE 7+ funcionan de manera diferente.

Answer 1

Como dijo David Dorward, no hay manera de hacer exactamente lo que quiere limpiamente con CSS, sin embargo, puedo pensar en algunas soluciones ...

Asumiendo que su html es algo como esto (es decir, la cosa con el color de fondo es la única cosa en la celda de tabla):

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

Usted puede hacer esto a tu CSS:

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

Funciona en este sencillo ejemplo (al menos en Firefox 3.5), pero podría tener otros efectos secundarios según el contenido de tu html.

---

Editar: Otra opción si estás bien con la piratería que a través de JavaScript, jQuery es utilizar la siguiente manera:

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

Esto funciona en el ejemplo anterior HTML/CSS, pero lo haría obviamente tendrá que ser cambiado para que coincida con sus clases css, etc.

Answer 2

Nº

CSS, actualmente, al menos, no tiene forma de estilo de un elemento basado en cualquier cosa que aparece después de la etiqueta de inicio para ese elemento en el documento. Por lo tanto, no puede diseñar un elemento basado en su contenido.

Answer 3

Bien Si sólo desea una célula entera cubierta, esto no requiere css, a menos que desee utilizarlo:

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

Funciona en FireFox e IE8 y 7. Cubre toda la celda incluso si el texto no lo hace.