Zellengröße in CSS-Tables

TomKG · 19.05.2021

Moin Moin,

ich bin dran mir ein EPG (elektronische Programmzeitschrift) zu bauen, ich weiß zu Netflix-Zeiten komme ich damit ein paar Jahre zu spät aber lasst mir meinen Spaß

.
ich packe dazu alle Sendungen eines Senders in eine einzeilige CSS-Table als Zellen und bestimme per Javascript und einen Skalierungsfaktor deren Breite die ich in das Style-Attribute schreibe. Leider weicht diese Breite immer ein paar Pixel von der tatsächlichen Breite ab, was zu unschönen Ergebnissen führt. Hat jemand eine Idee? Oder ist der Ansatz über die Table schon eine schlechte Wahl?

ich danke euch schon mal
Tom

basti1012 · 19.05.2021

Bitte poste deinen Code, mit HTML und CSS(kein Bild).
Oder erstelle bei codepen.io ein Beispiel.
Das Bild bringt nicht viel weil man den Code nicht testen kann.
Dass jede Zeile seine eigene Styleattribute hat finde ich auch etwas unnötig.
Dein ganzes Vorhaben sollte mit Flexbox klappen.
Wie gesagt, poste den Code oder erstelle ein Beispiel dann geht das Helfen einfacher.

TomKG · 20.05.2021

Guten Morgen,
Dank Basti für den Hinweis, ein passendes Beispiel zu erstellen, dafür brauche ich aber ein paar Tage.
Mit Flexbox ist ein guter Tipp, du meinst also auf die Tabelle zu verzichten und dafür die Flexbox einsetzen?

Gruß Tom

basti1012 · 20.05.2021

Kommt drauf an was du da genau hast.
Ein beispiel ist ja schnell gemacht.
Dein Code vom Foto ist ja leicht kopiert.

Console öffnen
ganz oben am <html> Element machst du rechts klick mit der Maus , und gehst dann auf Copy outerHTML.

Dann öffnest du Codepen und kopierst den Kram in den HTML Bereich.
Dann noch CSS und JAVASCIPT reinkopieren und fertig.
Einmal testen, ob dein Problem da auch noch ist, wenn ja, dann speichern und den Link hier posten.

TomKG · 22.05.2021

Guten Morgen,
das hab ich nun mal gemacht, die Zellen werden immer schmaler dargestellt als im Style-Attribut vorgegeben.

https://codepen.io/tom-G5/pen/qBRyrmx

Der Fehler ist bestimmt ganz simple, ich finde ihn bloß nicht.

Gruß Tom

scatello · 22.05.2021

TomKG schrieb:
die Zellen werden immer schmaler dargestellt als im Style-Attribut vorgegeben

Nö, die sind genauso breit, wie angegeben.

TomKG · 22.05.2021

scatello schrieb:
Nö, die sind genauso breit, wie angegeben.

der innen liegende <span> schon, die Zelle an sich ist aber schmaler.


<div class="TabCell Sendung" id="ARD|1621657500" name="tvProgramItem" style="width: 186.667px;"><span class="Content" style="width: 170.667px;">Tom Sawyer</span></div>

wird dargestell als
width: 170.667px
also wie der <span>
Dass es immer die angegebene Spanbreite ist, ist mir gerade erst aufgefallen.

Gruß Tom

basti1012 · 22.05.2021

Warum gibst du überhaupt irgendwelche width Angaben in der Tabelle an?
Warum ist eine Zeile 30.000 Pixel lang?
Ich glaube, du solltest das alles anders machen.

Du willst doch eine EPG erstellen.
Man sieht da ja sowieso nur 2-4 Stunden im Bild.
Willst du andere Zeiten sehen muss man scrollen oder auf eine Fernbedienung nach rechts oder Links drücken.

Ich würde das alles anders machen.
Ich teste da mal was und schreibe nachher nochmal mit Beispiel

basti1012 · 22.05.2021

Hast du dir das mal angeschaut
https://www.teleboy.ch/programm/flow?date=2021-05-15

Andere frage.
Woher bekommst du die Daten?
Also Uhrzeiten / Sender / was wird gezeigt?

Man kann sowas auch selber bauen, doch dazu müsste man wissen wie du die Daten bekommst ( z. B. API ).
Danach kann man so eine Ausgabe dynamisch zusammen bauen.

TomKG · 23.05.2021

Moin Basti,
die Daten stelle ich mir über Nacht mit webGrap+Plus als xml zusammen, wandel sie nach JSON und leg es auf dem Server ab.
Das lese ich mit Javascript ein. Das ganze ist also schon dynamisch. Dann gibt es eine Vorgabe wie lang der Zeitraum ist den ich mit einem mal auf dem Bildschirm sehen möchte (zBsp 240min), daraus erechne ich einen Skalierungsfaktor. Mit diesem wird dann die Dauer der Sendung multipliziert um die Breite der Zelle zu erhalten, welche ich dann über Javascript setzte. Jetzt kann ich horizontal scrollen oder wischen auf dem Tablet um die Uhrzeit zu wechseln. (Mein Plan für später ist, mit Hilfe von FHEM darüber auch umschalten zu können oder vielleicht sogar Aufnahmen vormerken)

basti1012 schrieb:
Warum gibst du überhaupt irgendwelche width Angaben in der Tabelle an?
Warum ist eine Zeile 30.000 Pixel lang?
Ich glaube, du solltest das alles anders machen.

wie sollte ich das deiner Meinung nach ohne width Angabe im Style-Attribut machen? Mir fällt dazu nichts anderes ein.
Die Länge der Zeile ergibt sich durch den Zeitraum den ich einlese.

basti1012 schrieb:
Hast du dir das mal angeschaut
https://www.teleboy.ch/programm/flow?date=2021-05-15

Danke für den Tipp, die bauen dort eine Liste <ul> auf und im Style-Attribut der Listenelemente ist auch width gesetzt. Zusätzlich positionieren sie das Listenelement absolut und brauchen deswegen noch die Angabe von left. Das wollte ich mit der Tabelle umgehen.

ich hänge auch mal ein json-File an wie ich es einlese
schönen Pfingstsonntag
Tom

basti1012 · 23.05.2021

Mit den Json File kann ich jetzt zumindest was anfangen.Ich werde es mal versuchen wie ich es mir dachte, mal kicken ob es klappt. Aber in großen und ganzen machst so es so wie ich es versuchen würde. Außer den ganzen in Line Stiyle., den will ich anders machen