Bootstrap-Tabelle gestreift: Wie kann ich den Stripe-Schritt ändern?

8

Ich benutze Bootstrap und habe eine gestreifte Tabelle. Um detailliertere Informationen über die Nachfrage zu zeigen, bin ich jede zweite Zeile zusammengebrochen. Klappbarer (aber nicht gestreifter) Tisch, Twitter Bootstrap Verwenden collapse.js auf Tabellenzellen [Fast Fertig ]

Die Sache ist, dass mit dem Standardverhalten aller ‚Haupt‘ Tabellenzeilen in der gleichen Farbe gefärbt sind und Tabelle gestreift sieht nicht so aus, wenn alle erweiterbaren Zeilen (mit detaillierten Informationen) zusammengeschoben werden. Dies liegt daran, dass erweiterbare Zeilen die Farbreihenfolge "durchbrechen".

Ich möchte Haupt-Reihe und erweiterbar Reihe haben als einziger Block zu betrachten und eine Farbe zu färbenden verwendet wird.

war meine Idee Schritt des Striping von jedem zweiten zu jedem zweiten Paar von Zeilen zu ändern. Aber ich weiß nicht, wie ich das machen soll.

in bootstrap.css gibt es die folgende Zeichenfolge verantwortlich für das Striping:

%Vor%

Ich denke, ich muss den "ungeraden" Parameter in etwas wie (4n-3 und 4n-2) ändern, aber ich bin nicht sicher, wie ich das richtig machen soll.

Ist es möglich, Striping Schritt zu ändern, und wenn ja, wie kann ich dies tun?

    
Triple 26.08.2014, 10:54
quelle

1 Antwort

7

Zitat :

  

Der Selektor: nth-child (n) stimmt mit jedem Element überein, das das n-te untergeordnete Element unabhängig von seinem Typ ist. n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Kurz gesagt, ja können Sie odd in 4n-3 ändern (der Index des ersten untergeordneten Elements ist 1).

Schlüssel:

  1. odd : Wird verwendet, um untergeordnete Elemente zu finden, deren Index ungerade ist.
  2. even : Wird verwendet, um untergeordnete Elemente mit einem geraden Index abzugleichen.
  3. a : repräsentiert eine Zyklusgröße
  4. n : ein Zähler, der bei 0 beginnt
  5. b : ein Offset-Wert

Hinweis: Ein Beispiel für die Schlüssel 1/2 wäre p:nth-child(odd) und ein Beispiel für die Schlüssel 3/4/5 (in An + b) wäre p:nth-child(4n-3)

    
Jordan.J.D 26.08.2014, 13:09
quelle

Tags und Links