2016-11-02 6 views
-1

Gibt es noch andere CSS-Eigenschaften, die als Alternative für 'Hintergrundfarbe' verwendet werden können, um die Farbe eines <tr> zu setzen?Wie färbt man eine Tabellenzeile ohne Hintergrundfarbe?

Ich verwende ein Drittanbieter-Tool, das die Farbe von Tabellenelementen über JavaScript festlegt. Ich kann nicht scheinen, es mit CSS zu überschreiben, sogar mit ! wichtig. Der JavaScript-Code ist für mich ebenfalls nicht verfügbar.

Also ich dachte, die Einstellung der Hintergrundfarbe über eine alternative Methode funktioniert möglicherweise. Aber es gibt keine Eigenschaft, von der ich weiß, dass sie wie Hintergrundfarbe wirkt.

Jede Hilfe wird groß sein.

PS: Ich würde lieber eine CSS-basierte Lösung als jede Form von Skript bevorzugen.

+0

Veröffentlichen Sie Ihre HTML und CSS – Ponnarasu

+0

Hintergrund verwenden, um Hintergrund für die festzulegen und uns zeigen, was Sie getan haben –

+0

Der Code wird nicht viel Hilfe sein. Das Problem tritt nicht mit der Eigenschaft auf und die Hintergrundfarbe wird auf festgelegt. Das Drittanbieter-Tool hat jedoch einen Hover-Effekt für Tabellen, die die Farben zurücksetzen, wenn die Maus darüber schwebt. Es ist sowieso nicht zu übertreiben, dass Eigentum mit CSS. –

Antwort

3

Vielleicht funktioniert dies für Sie:

tr { 
 
    background-color: red !important; // we want this to override 
 
} 
 
tr { 
 
    background-image: linear-gradient(to bottom, blue, blue) !important; 
 
} 
 
tr:hover { 
 
    background-image: linear-gradient(to bottom, green, green) !important; 
 
}
<table> 
 
    <tr style="background-color: red !important;"> 
 
    <td>Table Content</td> 
 
    </tr> 
 
</table>

+0

Hintergrundfarbe wird mit dem Farbverlauf eingestellt. Wenn es jedoch schwebt, ändert sich die Farbe in die Standardfarbe. Das ist das Problem. –

+0

Ich habe meine Antwort aktualisiert. Wenn dies nicht funktioniert, wäre es hilfreich zu wissen, auf welche Weise der Hover-Zustand die Hintergrundfarbe verändern wird. –

+0

Hallo @AndyTschiersch, ich habe schon versucht, Änderungen im: hover-Zustand vorzunehmen, lange bevor ich diese Frage gepostet habe. Es hat nicht funktioniert. Es ist so, als wäre der in der Tabelle implementierte Hover mit der Hintergrundeigenschaft nicht veränderbar. Ich wünschte, ich hätte Zugriff auf das Javascript, das den Hover-Effekt ändert, aber ich habe es nicht, um Ihnen mehr Informationen zu geben. –

0

Verwenden Sie einen sehr großen Einsatz box-shadow

td { 
 
    overflow: hidden; 
 
    /* required */ 
 
} 
 
td:hover { 
 
    box-shadow: 0 0 200px green inset; 
 
}
<table> 
 
    <tr style="background-color: orange !important;"> 
 
    <td>Table Content</td> 
 
    <td>Table Content</td> 
 
    <td>Table Content</td> 
 
    </tr> 
 
    <tr style="background-color: pink !important;"> 
 
    <td>Table Content</td> 
 
    <td>Table Content</td> 
 
    <td>Table Content</td> 
 
    </tr> 
 
</table>

Verwandte Themen