Background Gradient beim Scrollen

[Matthias Apsel]

Om nah hoo pez nyeetz, Ulrikop!

Das war ein abgespecktes Beispiel. Die Farbe soll nur über den Header gehen, der Inhalt, der darauf folgt, soll davon nicht betroffen sein. Ich habe mal ein bisschen größeren jsfiddle Beispiel, damit man sich den Rest vorstellen kann. Ich finde damit kein Div, dass ich den Farbverlauf zuweisen kann, so dass es funktioniert.

.table_content {  
  background-image: linear-gradient(black, white);  
  background-size: 100% 50px;  
  background-repeat: no-repeat;  
}

• Ich wollte Multicolumns (wie bei der Zelle Januar, dass sich über die ersten 5 Spalten hinweg zieht) nutzen.

colspan ist dein Freund;

• Der Verlauf der Farbe des Headers soll sich über die beiden Header-Zeilen (Monate und Wochen) hinziehen.

ein Verlauf für thead sollte es tun.

• Die linke Spalte soll fixiert sein, die restlichen scrollbar.

Das ist schwierig

Da dachte ich mir: Eigentlich ist genau definiert, wie hoch und breit die Spalten sein sollen. Dann benötige ich ja nicht zwingend eine Tabelle von HTML, sondern kann mir eine ganz einfach selber zusammenbauen.

Damit geht aber der logische Zusammenhang zwischen Spaltenkopf und Inhalt verloren.

Ansich finde ich das Ergebnis ganz ok. Probleme ist nur der hier angesprochene Farbverlauf im Header. Außerdem gefallen mir die Rahmen noch nicht, da sie zum Beispiel bei dem scrollbarn Bereich oben nicht angezeigt werden und der des Inhalts über dem Header liegt (auch wenn ich den z-index ändere). Habe outline genommen, damit ich von width und height Werten ausgehen kann und nicht wie bei border den Rahmen beachten muss.

Box-sizing ist dein Freund. Außenabstände sollten die Anzeige der oberen Rahmenlinien sicherstellen.

Matthias