html - tabla - Cómo obtener el color de fondo CSS en la etiqueta<tr> para abarcar toda la fila

tablas html avanzado

Question

He intentado todo lo que puedo pensar en CSS para obtener un color de fondo que abarque toda la fila de una tabla (etiqueta <tr>). Pero sigo obteniendo un borde blanco alrededor de cada celda.

CSS (extracto):

/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}

HTML (extracto):

<tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr>

Simplemente no quiere cooperar. Gracias por ayudar...

Answer 1

¿Has intentado establecer el espaciado a cero?

/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}

Answer 2

Esto funcionó para mí, incluso dentro de un div:

 div.cntrblk tr:hover td {
line-height: 150%;
background-color: rgb(255,0,0);
font-weight: bold;
font-size: 150%;
border: 0;
}

Seleccionó toda la fila, pero me gustaría que no haga el encabezado, aún no lo he visto. También arregló parcialmente las fuentes que no se ampliarían con el vuelo estacionario ??? Aparentemente debe aplicar la configuración a la celda, no a la fila, pero seleccione todas las celdas del componente con el tr: hover. Para rastrear el problema de escalado de fuente consistente. Dulce que CSS hará esto.

Answer 3

Firefox y Chrome son diferentes
Chrome ignora el color de fondo del TR
Ejemplo: http://jsfiddle.net/T4NK3R/9SE4p/

<tr style="background-color:#F00">
<td style="background-color:#FFF; border-radius:20px">
</tr>

En FF, el TD obtiene las esquinas rojas, en Chrome no

Answer 4

La eliminación de los bordes debe hacer que el color de fondo se pinte sin espacios entre las celdas. Si miras detenidamente este jsFiddle , verás que el color azul claro se extiende por la fila sin espacios en blanco.

Si todo lo demás falla, intente esto:

table { border-collapse: collapse; }

Answer 5

Prefiero usar border-spacing ya que permite más flexibilidad. Por ejemplo, podrías hacer

table {
border-spacing: 0 2px;
}

Lo cual solo colapsaría los bordes verticales y dejaría los horizontales intactos, que es lo que parece que el OP realmente estaba buscando.

Tenga en cuenta que border-spacing: 0 no es lo mismo que border-collapse: collapse . Tendrá que usar este último si desea agregar su propio borde a un tr como se ve here .

Answer 6

Prueba esto:

 .rowhighlight > td { background: green;}

Answer 7

table{border-collapse:collapse;}

Answer 8

tr.rowhighlight td, tr.rowhighlight th{
background-color:#f0f8ff;
}