Comment obtenir la couleur de fond de css sur les <tr> tag étendre sur toute la ligne

J'ai essayé tout ce que je peux penser en css afin d'obtenir une couleur de fond pour couvrir un ensemble de ligne de tableau (<tr> tag), Mais je reçois 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 n'a tout simplement pas envie de coopérer. Merci pour votre aide...

InformationsquelleAutor H. Ferrence | 2011-04-15

48
```
table{border-collapse:collapse;}
```
- table border-collapse n'est pas de faire de Firefox 4
- Fonctionne très bien pour moi dans FF4. Essayez d'utiliser Reset CSS. Il doit y avoir quelque chose de primordial. Ou laissez-nous voir votre code dans jsfiddle.
- Il y a la page --> teamsonline.net/test/backgroundcolor/page.html
- ajouter <table id="standings" style="border-collapse:collapse"> a Travaillé pour moi dans Firebug sur votre site.
- Wow, c'est tellement bizarre. Il fonctionne inline, mais pas dans le css. Les styles css sont la dernière défini. Eh bien, au moins il fonctionne. Grâce Jaspero.
InformationsquelleAutor Jaspero
5

Supprime les frontières devrait faire de la couleur d'arrière-plan de la peinture sans les espaces entre les cellules. Si vous regardez attentivement cette jsFiddle, vous devriez voir que la lumière de couleur bleue s'étend sur la ligne sans espaces blancs.

Si tout le reste échoue, essayez ceci:
```
table { border-collapse: collapse; }
```
- J'ai supprimé les frontières et qui n'a pas à faire le truc
- table border-collapse ne pas le faire
- semble bien en jsFiddle -- n'a tout simplement pas regarder à droite dans Firefox 4
- A l'air bien pour moi dans Firefox 4. Vous avez peut-être eu un héritage/spécificité problème, ou un problème de doctype (peu probable).
- Je suis l'aide de FF4 et le jsFiddle exemple n'a pas de lacunes. Peut-être avez vous d'autres codes interférer avec elle? Je suggère de télécharger Firebug et voir ce que les règles sont en cours d'utilisation.
- C'est FF. Vous le faites mal...
- Je ne l'utilisation de firebug. mon css est la dernière série de css
- js fiddle a sa propre feuille de style qui s'applique table { border-collapse: collapse; border-spacing: 0; } qui en fait ne jamais montrer les lacunes (même si vous supprimez tous les css de mise en forme à l'exception de la ligne de couleur
InformationsquelleAutor BoltClock
4

Essayez ceci:
```
    .rowhighlight > td { background: green;}
```
- Cela fonctionne pour moi sur Chrome
InformationsquelleAutor Atte Väätäinen
4

Je préfère utiliser border-spacing car il permet plus de flexibilité. Par exemple, vous pourriez faire
```
table {
  border-spacing: 0 2px;
}
```
Qui ne ferait que réduire la verticale frontières et de laisser les horizontaux dans le tact, qui est ce que cela ressemble à l'OP est actuellement à la recherche d'.

Noter que border-spacing: 0 n'est pas le même que border-collapse: collapse. Vous aurez besoin d'utiliser la dernière si vous voulez ajouter votre propre frontière à un tr comme on le voit ici.

InformationsquelleAutor dlsso

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

cela ne fonctionne pas, soit

InformationsquelleAutor Álvaro González

2

Firefox et Chrome sont différents

Chrome ignore le TR est background-color

Exemple: http://jsfiddle.net/T4NK3R/9SE4p/
```
<tr style="background-color:#F00">
     <td style="background-color:#FFF; border-radius:20px">
</tr>  
```
Dans FF le TD devient rouge à coins, en Chrome pas

InformationsquelleAutor T4NK3R
0

Avez-vous essayé le réglage de 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;}
```
- Vouliez-vous dire border-spacing?
- L'espacement n'est pas valide de style css, mais de la frontière, l'espacement est de. J'ai essayé de la frontière de l'espacement et qui ne l'ont pas fait.
InformationsquelleAutor Geert Immerzeel
0

Cela a fonctionné pour moi, même à l'intérieur d'un 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é l'ensemble de la ligne, mais je tiens à ne pas faire la tête, n'ont pas regardé encore. Il a également partiellement fixe les polices qui ne serait pas à l'échelle avec le hover??? Apparemment vous avez d'appliquer les paramètres de la cellule pas la ligne, mais de sélectionner l'ensemble des cellules avec la tr:hover. Sur la traque de la police uniformes de mise à l'échelle problème. Doux que le CSS va le faire.

InformationsquelleAutor webgeek atlbike

Vous devez vous connecter pour publier un commentaire.