Alternative Zeilenfarben in Tabellen mit Inline-Stil CSS

Ich möchte die Hintergrundfarbe einer Tabelle ändern, um die Lesbarkeit zu erhöhen. Nachdem ich ein bisschen gegoogelt hatte, fand ich den Code, den ich brauchte.Alternative Zeilenfarben in Tabellen mit Inline-Stil CSS

tr:nth-child(even) { 
    background-color: #000000; 
}

Das Problem in meiner Lösung, ich habe keinen Zugriff auf head-Tag, und ich möchte dies mit Inline-Stil CSS implementieren, aber es funktioniert nicht.

<tr style="nth-child(even) background-color: #000000;">

Ideen?

Quelle

2013-04-23 williamwmy

Was meinen Sie, Sie haben keinen Zugriff auf das Tag? Inline-Styles sind ein Wartungs-Albtraum, der darauf wartet, zu passieren. – cimmanon

Das erste Bit von CSS, das Sie ausgeblendet haben, würde in Ihr Stylesheet gehören, wenn Sie die Hintergrundfarbe jeder zweiten Zeile ändern möchten. Der Inline-Code, den Sie geschrieben haben, wird nicht einmal an sich selbst arbeiten, weil diese bestimmte Zeile "ungerade" wäre, wie es das erste Kind wäre. –

Ich habe Head Tag geschrieben, aber seit ich es um Klammern gewickelt habe, zeigte es nicht in meinen Fragen. jetzt behoben. Das Problem ist, dass, selbst wenn ich die ganze Tabelle mit diesen TR Inline-Tags hinzufüge, es nicht funktioniert. – williamwmy

Inline-Stile sind pro Element, so müssten Sie die entsprechenden Stile in das style Attribut jedes anderen Elements tr injizieren. Wenn Sie diese Zeilen nicht bereits dynamisch generieren und JavaScript nicht zum Einführen dieser Stile verwenden können, müssen Sie das Attribut für jedes Element manuell in das Element tr übernehmen.

Quelle

2013-04-23 14:05:00 BoltClock

Nicht fest, aber Sie müssten den Inline-Stil für die Hintergrundfarben in jeder einzelnen Zeile anwenden. Mühsam, aber möglich. – Tanner

@Tanner: Stimmt, ich habe es jetzt geklärt. – BoltClock

Aber selbst wenn ich es auf jedem tr inje, funktioniert es nicht. Was ich mache ist, dass ich in jede Zeile tr. Ich dachte, dies wäre wie, wenn diese Reihe gerade ist, mache die Hintergrundfarbe schwarz. – williamwmy

Neben BoltClock Antwort, wenn Sie jQuery verwenden können, können Sie so etwas wie dies versuchen:

$('tr:nth-child(even)').css("background", "red");

Dieses Auto-Insert Inline-Styles in Ihrem Markup.

A working fiddle

Quelle

2013-04-23 14:27:06 Arkana

Ich hatte eine ähnliche Situation. Ich löste es durch einen Stil Abschnitt kurz vor meinem Tisch setzen:

<style> 
    table#some_table_id tr:nth-child(even) { background-color:#dddddd; } 
</style> 
<table id="some_table_id"> 
    <!-- table markup removed --> 
</table>

nicht die eleganteste Lösung, aber es funktioniert für mich (in Google Chrome 29.0.x).

Quelle

2013-09-04 19:01:42

Alternative Zeilenfarben in Tabellen mit Inline-Stil CSS

Antwort

Verwandte Themen