web-dev-qa-db-fra.com

Comment faire en sorte que la couleur de fond css de la balise <tr> couvre toute la ligne

J'ai essayé tout ce que je pouvais penser en CSS pour obtenir une couleur d'arrière-plan couvrant toute une ligne du tableau (balise <tr>), mais je continue à avoir une bordure blanche autour de chaque cellule.

CSS (extrait):

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

HTML (extrait):

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

Il ne veut tout simplement pas coopérer. Merci pour ton aide...

htmlcssbackground-color
49
H. Ferrence
table{border-collapse:collapse;}
48
Jaspero

Supprimer les bordures devrait créer la couleur d'arrière-plan Paint sans espace entre les cellules. Si vous regardez attentivement this jsFiddle , vous devriez voir que la couleur bleu clair s’étend sur la rangée sans intervalle blanc.

Si tout échoue, essayez ceci:

table { border-collapse: collapse; }
5
BoltClock

Essaye ça:

    .rowhighlight > td { background: green;}
4
Atte Väätäinen

Je préfère utiliser border-spacing car cela permet plus de flexibilité. Par exemple, vous pourriez faire

table {
  border-spacing: 0 2px;
}

Ce qui ne ferait que réduire les limites verticales et laisser les limites horizontales intactes, ce qui semble être ce que le PO cherchait réellement.

Notez que border-spacing: 0 n'est pas la même chose que border-collapse: collapse. Vous devrez utiliser ce dernier si vous souhaitez ajouter votre propre bordure à un tr tel que vu ici .

4
dlsso

Firefox et Chrome sont différents
Chrome ignore la couleur de fond du TR
Exemple: http://jsfiddle.net/T4NK3R/9SE4p/

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

En FF, le TD obtient des coins rouges, dans Chrome pas

2
T4NK3R
tr.rowhighlight td, tr.rowhighlight th{
    background-color:#f0f8ff;
}
2
Álvaro González

Cela a fonctionné pour moi, même au sein d'une div:

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

Il a sélectionné toute la ligne, mais j'aimerais qu'il ne fasse pas l'en-tête, je ne l'ai pas encore regardé. Il a également partiellement fixé les polices qui ne seraient pas mises à l'échelle avec le survol ??? Apparemment, vous devez appliquer les paramètres à la cellule et non à la ligne, mais sélectionner toutes les cellules du composant avec le tr: hover. Pour rechercher le problème de redimensionnement des polices non cohérent. Doux que CSS le fasse.

0
webgeek atlbike

Avez-vous essayé de régler l'espacement à zéro?

/*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;}
0
Geert Immerzeel