Table Zellen 0-24h zeit darstellen

[HannesWeninger]

Hallo,

ich habe eine ganz normale Tabelle mit z.B. 7 Spalten (eine Woche). Weiters habe ich Zeitintervalle für die Tage dieser Woche (Mo: 08:00 - 13:30 und 14:40 - 18:00, Di: 07:30 - 14.50, usw.)

Jetzt kommts :-) : diese Zeiten möchte ich jetzt in den Zellen der Tabelle darstellen, schematisch so in der Art:

         Mo               		Di     			      
–––––––––––––––––-----------------------------------------------
|   |||||| ||||||         |	             |	    	     | ...
----------------------------------------------------------------

Am Montag ist also z.B. von 08:00-12:00 und von 13:00-17:00 eingetragen. Ich muss ehrlich gesagen ich weiß nicht wie ich das am besten angehen soll. Ich hab mir schon einige gedanken dazu gemacht, eine passende Lösung aber noch nicht.

Hätte von euch jemand eine Idee, wie ich das lösen kann (am Besten auch noch performant :-)) Meine Tabelle ist ja auch nicht starr - man kann zwischen den Wochen umschalten und die spalten werden dann je nachdem größer oder kleiner. Auch kann man auf Tage und Monate umschalten - das wär aber dann der nächste Schritt.

Ich bin dankbar für jede Anregung in diese Richtung. Ich arbeite mit AngularJS - das wird aber das Problem der Darstellung nur unwesentlich vereinfachen.

Danke im Voraus!! Hannes

[HannesWeninger]

Hallo nochmals,

mein aktueller Stand schaut mom. so aus:

Mein Beispiel

Ich habe noch Probleme, die Trennzeichen nebeneinander darzustellen in der Zelle. Könnte mir vielleicht dabei jemand helfen?

Danke! Hannes

[Jörg Reinholz]

Moin!

Wolltest Du nicht vielmehr sowas?

Lese bei den Eigenschaften colspan und rowspan für Tabellen-Zellen nach.

Jörg Reinholz

[HannesWeninger]

Danke Jörg, sehr cool, das ist genau das was ich brauche!!! DANKE!

[HannesWeninger]

Lese bei den Eigenschaften colspan und rowspan für Tabellen-Zellen nach.

Hallo nochmal,

das klappt wunderbar, Ich möchte jetzt noch einen "Layer" drüberlegen über die Stunden. Ich war jetzt so begeistert von deiner Lösung dass ich das jetzt auch noch einmal fragen möchte. Könnte man am Montag von 08:37-11:43 darstellen?

Danke! Hannes

[MudGuard]

Hi,

Könnte man am Montag von 08:37-11:43 darstellen?

Wenn Du minutengenaue Darstellung haben willst, brauchst Du mindestens 1440 Pixel pro Tag, einen für jede der 24*60 Minuten, denn bei weniger als einem Pixel pro Minute kannst Du ja nicht mehr erkennen, zu welcher Minute ein eingefärbter Pixel gehört.

Machbar ist das theoretisch mit Tabellenzellen. Ob das sinnvoll ist und ob die Browser das praktisch noch machen, ist eine andere Frage.

Ich könnte mir vorstellen, daß inline-Blöcke mit passender Hintergrundfarbe hier besser zu handhaben sind.

<div id="zeiten"><span class="unbelegt" style="width:229px></span><span class="arbeit" style="width:474px"></span><span class="unbelegt" style="width:737px;"></span></div>

#zeiten span { display:inline-block; }
.unbelegt { background:transparent; }
.arbeit { background:red; }

cu,
Andreas a/k/a MudGuard

[HannesWeninger]

<div id="zeiten"><span class="unbelegt" style="width:229px></span><span class="arbeit" style="width:474px"></span><span class="unbelegt" style="width:737px;"></span></div>

#zeiten span { display:inline-block; }
.unbelegt { background:transparent; }
.arbeit { background:red; }

Hallo Andreas,

danke für deine Antwort, zu dem Pixelproblem sag ich mal, wenns bei einem kleineren Bildschirm nicht ganz passt dann ist das nicht tragisch, bei einem größeren Bildschirm über 1440 Pixel (24h * 60min) sollte es aber schoh passen.

Kann man deinen Vorschlag auch in

Beispiel von Jörg mir Stundeneinteilung

einbauen (Ich habs leider nicht geschafft).

Danke Euch für eure Hilfe! Hannes

[dedlfix]

Tach!

Ich könnte mir vorstellen, daß inline-Blöcke mit passender Hintergrundfarbe hier besser zu handhaben sind.

Vielleicht besser mit Prozent als mit Pixeln, dann zieht es sich auch bei beliebig breiten Zellen passend. Zudem könnte man statt zwei Elementen nur eins mit linkem Margin nehmen.

dedlfix.

[Hannes Weninger]

Hallo Jörg,

eine kurze kleine Frage hätte ich noch zu deinem Beispiel. Ist es möglich, die vertikalen Spalten- Linien auch anzuzeigen - Zwischen Montag, Dienstag, Mittwoch usw. Das Problem ist ja, dass es sich jetzt nur mehr um eine zusammenhängende Zeile handelt und nicht mehr um Spalten. Das wäre noch mein letztes Problem - danach wär ich für die Darstellung der Tabelle mal durch. Danke für eure Hilfe! Hannes

[Jörg Reinholz]

Moin!

Ist es möglich, die vertikalen Spalten- Linien auch anzuzeigen - Zwischen Montag, Dienstag, Mittwoch usw.

Ja. In dem Du für die Tabellenzelle der ersten Stunde und der letzten Stunde eine Klasse vergibst und diese so formatierst, dass die einen rechts bzw. links einen Border erhalten.

entsprechend natürlich die th.

Jörg Reinholz

[Hannes Weninger]

Ja. In dem Du für die Tabellenzelle der ersten Stunde und der letzten Stunde eine Klasse vergibst und diese so formatierst, dass die einen rechts bzw. links einen Border erhalten.

Hallo Jörg,

irgendwie komm ich nicht ganz hin, ich habs jetzt so versucht:

Mein Versuch

Leider schaut das eher dürftig aus. Gibts da vielleicht noch eine andere Möglichkeit, die Linien zu realisieren? Danke! Hannes

[MudGuard]

Hi,

Ja. In dem Du für die Tabellenzelle der ersten Stunde und der letzten Stunde eine Klasse vergibst

nö. nth-child existiert.

cu,
Andreas a/k/a MudGuard

[Hannes Weninger]

nö. nth-child existiert.

Hallo Andreas,

wäre es vielleicht möglich, dass du das in meinem Beispiel einträgst?

Danke! Hannes

[Auge]

Hallo

nö. nth-child existiert.

wäre es vielleicht möglich, dass du das in meinem Beispiel einträgst?

Och nu. Ein wenig Eigeninitiative beim lesen und lernen erwarten wir schon. Die Doku hat eine Auflistung mit Beschreibungen und Beispielen für die strukturellen Pseudoklassen. Wenn es damit nicht klappt, frage bitte nach.

Tschö, Auge

[Hannes Weninger]

Hallo,

ich hätte noch eine andere Frage. Ich hab hier mein aktuelles Beispiel:

Mein Beispiel

Mir ist nicht klar, wenn ich für das Attribute "left" 100/24h=4.12 (also 4.12, 8.24, 12.36 usw.) ist, dass dann meine Trennstriche über die Zelle hinausgehen.

Könnte mir das jemand erklären bzw. wie kann ich das machen, dass es passt. Wenn ich die %- Werte verkleinere dann stimmts vielleicht, aber ich möchte ja auch noch berechungen durchführen und dann die Zeit exakt Eintragen/Einzeichnen. Spätestens dann würde es nicht mehr stimmen.

Danke! Hannes

[Auge]

Hallo

Mein Beispiel

Mir ist nicht klar, wenn ich für das Attribute "left" 100/24h=4.12 (also 4.12, 8.24, 12.36 usw.) ist, dass dann meine Trennstriche über die Zelle hinausgehen.

Für jede Stunde wird ein div.general im umschließenden Element div.personalHourFieldWrapper angelegt. Das umschließende Element wurde mit position: relative; in einen eigenen Kontext versetzt, in dem die enthaltenen Elemente (hier: div.general) absolut positioniert werden können. Jedes der div.general ist ein 24-stel des Elternelements (div.personalHourFieldWrapper) breit (obwohl ich da 4.166 errechne??) und wird um ein 24-stel nach rechts versetzt, damit sie nebeneinander angezeigt werden.

Tschö, Auge

[Hannes Weninger]

Hallo Auge,

danke! für die Erklärung. Ich habs glaub ich verstanden. Leider klappts noch immer nicht ganz bei mir (mir ist es eh schon ein bisschen peinlich, ich hab aber - als kleine Entschuldigung - das letzte Jahrzehnt nur backend programmiert).

Ich habs jetzt so probiert - außen relative, innen absolut:

Linkbeschreibung

leider passt jetzt die 2te Spalte und die Höhe wieder nicht. Könnte mir da noch jemand weiterhelfen!

Danke für Eure Hilfe und Geduld! Hannes