Wie man die CSS-Hintergrundfarbe aktiviert -Tag, um die gesamte Zeile zu überspannen

Lesezeit: 2 Minuten

Ich habe alles versucht, was ich mir in CSS vorstellen kann, um eine Hintergrundfarbe zu erhalten, die sich über eine ganze Tabellenzeile erstreckt (

-Tag). Aber ich bekomme immer einen weißen Rand um jede Zelle.

CSS (Auszug):

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

HTML (Auszug):

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

Es will einfach nicht kooperieren. Danke fürs Helfen…

Benutzer-Avatar
Jaspero

table{border-collapse:collapse;}

  • table border-collapse macht es nicht Firefox 4

    – H. Ferrence

    15. April 2011 um 18:42 Uhr

  • Funktioniert bei mir in FF4 einwandfrei. Versuchen Sie es mit CSS zurücksetzen. Es muss etwas Übergeordnetes geben. Oder lassen Sie uns Ihren Code in jsfiddle sehen.

    – Jasper

    15. April 2011 um 19:00 Uhr

  • hinzufügen <table id="standings" style="border-collapse:collapse"> Arbeitete für mich in Firebug auf Ihrer Website.

    – Jasper

    15. April 2011 um 19:29 Uhr


  • Wow, das ist so seltsam. Es funktioniert inline, aber nicht über das CSS. Die Stile im CSS sind der letzte definierte Satz. Naja, zumindest funktioniert es. Danke Jaspero.

    – H. Ferrence

    16. April 2011 um 1:46 Uhr

Benutzer-Avatar
dlso

nutze ich lieber border-spacing da es mehr Flexibilität ermöglicht. Das könntest du zum Beispiel machen

table {
  border-spacing: 0 2px;
}

Was nur die vertikalen Grenzen zusammenbrechen und die horizontalen intakt lassen würde, was sich so anhört, als hätte das OP tatsächlich gesucht.

Beachten Sie, dass border-spacing: 0 ist nicht dasselbe wie border-collapse: collapse. Sie müssen letzteres verwenden, wenn Sie Ihre eigene Grenze zu a hinzufügen möchten tr wie hier zu sehen.

Benutzer-Avatar
Atte Väätäinen

Versuche dies:

    .rowhighlight > td { background: green;}

Aufheben der Grenzen sollte Machen Sie die Hintergrundfarbe ohne Lücken zwischen den Zellen. Wenn man genau hinschaut diese jsFiddlesollten Sie sehen, dass sich die hellblaue Farbe ohne weiße Lücken über die Zeile erstreckt.

Wenn alles andere fehlschlägt, versuchen Sie Folgendes:

table { border-collapse: collapse; }

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

Benutzer-Avatar
T4NK3R

Firefox und Chrome sind unterschiedlich
Chrome ignoriert die Hintergrundfarbe des TR
Beispiel: http://jsfiddle.net/T4NK3R/9SE4p/

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

In FF bekommt der TD rote Ecken, in Chrome nicht

Benutzer-Avatar
Geert Immerseel

Hast du versucht, den Abstand auf Null zu setzen?

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

  • Meinten Sie border-spacing?

    – BoltClock

    15. April 2011 um 18:30 Uhr


  • Spacing ist kein gültiger CSS-Stil, aber Border-Spacing ist es. Ich habe es mit Border-Spacing versucht und das hat nicht funktioniert.

    – H. Ferrence

    15. April 2011 um 18:40 Uhr

1282870cookie-checkWie man die CSS-Hintergrundfarbe aktiviert -Tag, um die gesamte Zeile zu überspannen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy