wake-up-neo.com

So erhalten Sie die CSS-Hintergrundfarbe für das <tr> -Tag, um die gesamte Zeile zu überspannen

Ich habe alles versucht, was mir in CSS einfällt, um eine Hintergrundfarbe zu erhalten, die sich über eine gesamte Tabellenzeile erstreckt (<tr> -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...

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

Durch Entfernen der Ränder sollte die Hintergrundfarbe Paint ohne Lücken zwischen den Zellen angezeigt werden . Wenn Sie sich this jsFiddle genau ansehen, sollten Sie feststellen, dass sich die hellblaue Farbe ohne weiße Lücken über die Reihe erstreckt.

Wenn alles andere fehlschlägt, versuchen Sie Folgendes:

table { border-collapse: collapse; }
5
BoltClock

Versuche dies:

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

Ich bevorzuge border-spacing wie es mehr Flexibilität ermöglicht. Zum Beispiel könnten Sie tun

table {
  border-spacing: 0 2px;
}

Das würde nur die vertikalen Grenzen kollabieren und die horizontalen Grenzen im Takt belassen, so wie es sich anhört, als hätte das OP tatsächlich danach gesucht.

Beachten Sie, dass border-spacing: 0 ist nicht dasselbe wie border-collapse: collapse. Sie müssen Letzteres verwenden, wenn Sie einem tr einen eigenen Rahmen hinzufügen möchten (siehe hier .

4
dlsso

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

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

Das hat bei mir auch innerhalb eines div geklappt:

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

Es wurde die gesamte Zeile ausgewählt, aber ich möchte, dass der Header nicht angezeigt wird, habe mir das noch nicht angesehen. Es wurden auch teilweise die Schriften korrigiert, die mit dem Schwebeflug nicht vergrößert werden konnten ??? Anscheinend müssen Sie Einstellungen auf die Zelle anwenden, nicht auf die Zeile, sondern wählen alle Komponentenzellen mit dem Mauszeiger aus. Auf der Suche nach dem Problem der inkonsistenten Schriftskalierung. Süß, dass CSS dies tun wird.

0
webgeek atlbike

Haben Sie 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;}
0
Geert Immerzeel