Beliebig viele Tabellen nebeneinander darstellen

[Pit]

body {
    white-space: nowrap;
    /* Falls body der umgebende Container ist */
}

table {
    display: inline-table;
}

Bis demnächst
Matthias

Hallo Matthias,

ich habe das zuletzt so gemacht und es hat prima funktioniert.

Aber nun nicht mehr und ich weiß nicht, warum.

Zusatzfrage: Erkennt jemand, warum die Tabellenzelle unter dem Freitag und Samstag einen farbigen Hintergrund haben? Das war eigentlich für die Zellen unter dem Samstag und Sonntag gedacht.

Pit

[lindasown]

Hallo,

Zusatzfrage: Erkennt jemand, warum die Tabellenzelle unter dem Freitag und Samstag einen farbigen Hintergrund haben? Das war eigentlich für die Zellen unter dem Samstag und Sonntag gedacht.

Das liegt daran, dass du die Klasse 'week', die du in der colgroup zugeordnet hast, mit display:inline-table definiert hast. Hast du die Klasse absichtlich auch der gesamten Tabelle zugewiesen? (bzw. umgekehrt?) Linda

[Pit]

Das liegt daran, dass du die Klasse 'week', die du in der colgroup zugeordnet hast, mit display:inline-table definiert hast. Hast du die Klasse absichtlich auch der gesamten Tabelle zugewiesen? (bzw. umgekehrt?) Linda

Hallo Linda,

Die Klasse "week" habe ich absichtlich der der ganzen Tabelle zugeordnet. Und das "display: inline-table;" habe ich obigem Posting von Matthias entnommen, um die Tabellen nebeneinander darzustellen.

Pit

[lindasown]

Das verstehe ich, aber brauchst du hier

<col class="week"/>

wirklich die selbe Klasse wie hier?

<table class="week">

Ich will dir nicht absprechen, dass es vielleicht einen Sinn ergibt (auch wenn ich ihn gerade nicht erkenne), aber wenn du die Klasse in der colgroup entfernst, dann sind deine Farben am richtigen Ort.

viele Grüsse Linda

[Pit]

Das verstehe ich, aber brauchst du hier

<col class="week"/>

wirklich die selbe Klasse wie hier?

<table class="week">

Ich will dir nicht absprechen, dass es vielleicht einen Sinn ergibt (auch wenn ich ihn gerade nicht erkenne), aber wenn du die Klasse in der colgroup entfernst, dann sind deine Farben am richtigen Ort.

Hallo Linda,

arghs, Käse! Nein, das war natürlich ein Versehen.

Ich habe schlicht vergsessen, die colklasse umzubenennen. Danke für Dein scharfes Auge ;)

So ist eines meiner beiden Problem schon gelöst.

Pit

[Gunnar Bittersmann]

@@Pit

Aber nun nicht mehr

Könntest du erstmal alle Fehler beseitigen, sodass im Feld links oben nichts mehr rot ist?

LLAP 🖖

[Pit]

@@Pit

Aber nun nicht mehr

Könntest du erstmal alle Fehler beseitigen, sodass im Feld links oben nichts mehr rot ist?

Hallo Gunnar,

sehr gerne. Aber ich weiß leider nciht, warum das rot ist, bzw. das kann ich mir schon denken. ich weiß nicht, was daran falsch ist.

Pit

[lindasown]

Dein zweites Problem betrifft die Auswahl des Selektors... die Idee ist zwar gut, aber ein . ist kein #. ;-)

Gruss Linda

[Pit]

Dein zweites Problem betrifft die Auswahl des Selektors... die Idee ist zwar gut, aber ein . ist kein #. ;-)

Och nö, ne? So ein doofer Fehler! Und abermals danke für Dein scharfes Auge. Da wär ich nicht drauf gekommen.

Pit

[Gunnar Bittersmann]

@@Pit

Aber ich weiß leider nciht, warum das rot ist

Der erste rote Block beginnt mit einem ' – könnte also damit zusammenhängen. Mitunter ist der eigentliche Fehler schon (kurz) davor. In der vorigen Zeile:

Wenn du den Fehler berichtigt hast, ist der nächste rote Block </td>. Der Fehler liegt nicht bei dir, sondern bei JSFiddle: mit Kleinschreibung von <br> ist das Rot weg.

Das heißt, der Fehler liegt doch bei dir: was hat <BR> da überhaupt zu suchen?

Und warum verwendest du JSFiddle als Plattform, wenn du überhaupt gar kein JavaScript machst? Verwende was anständiges: CodePen bspw.

LLAP 🖖

[Pit]

Hi Gunnar,

Der erste rote Block beginnt mit einem ' – könnte also damit zusammenhängen. Mitunter ist der eigentliche Fehler schon (kurz) davor. In der vorigen Zeile:

Hätte ich auch nicht gesehen… Danke.

Das heißt, der Fehler liegt doch bei dir: was hat <BR> da überhaupt zu suchen?

Natürlich nichts! Ich habe es entfernt.

Ich habe nun alle Tips umgesetzt, bzw. Fehler korrigiert (aber im Original) und jetzt sieht das Ergebnis wie gewollt aus.

Und warum verwendest du JSFiddle als Plattform, wenn du überhaupt gar kein JavaScript machst? Verwende was anständiges: CodePen bspw.

Ich kenne bisher nur fiddle. Und will mich nicht bei 3 verschiedenen anmelden.

Danke, Pit

P.S: Erkennst Du Deine handschrift in der Tabelle wieder? Ich habe das jetzt so ähnlich umgesetzt, wie Du gestern vorgemacht hattest.

Achso, eine Frage noch: ich wollte die Kopfzeile, also die, wo die Tage und das Datum drin stehen, etwas schmaler machen, habe aber mit height keinen Effekt erzielt. Woran liegt das?

[Gunnar Bittersmann]

@@Pit

Achso, eine Frage noch: ich wollte die Kopfzeile, also die, wo die Tage und das Datum drin stehen, etwas schmaler machen, habe aber mit height keinen Effekt erzielt.

Natürlich nicht. Bei Tabellen werden die Zellen im Bedarfsfall breiter/höher dargestellt, damit der Inhalt vollständig zu sehen ist. D.h. height wirkt eher wie min-height.

Woran liegt das?

Dass du das Entwicklerwerkzeug deines Browsers nicht kennst?

Im Firefox sieht’s so aus:

Wenn du Innenabstand (padding) da ist, ist Innenabstand da.

LLAP 🖖

[Pit]

Hallo Gunnar,

Natürlich nicht. Bei Tabellen werden die Zellen im Bedarfsfall breiter/höher dargestellt, damit der Inhalt vollständig zu sehen ist. D.h. height wirkt eher wie min-height.

Ja ok. Aber ich will doch eigentlich nur die Schrift plus 3-4px. Padding haben.

Wenn du Innenabstand (padding) da ist, ist Innenabstand da.

Aber ich habe doch gar kein Padding angegeben?

Pit

[Gunnar Bittersmann]

@@Pit

Aber ich habe doch gar kein Padding angegeben?

Das Entwicklerwerkzeug meines Browsers sagt anderes. Das deine sicher auch‽

LLAP 🖖

[Pit]

@@Gunnar Bittersmann

Aber ich habe doch gar kein Padding angegeben?

Das Entwicklerwerkzeug meines Browsers sagt anderes. Das deine sicher auch‽

Ja natürlich. Ich glaub, für heute mache ich besser Feierabend, ich bin heute irgendwie etwas verpeilt (war ein langer Abend gestern ;) ) Danke für Deine Hilfe, Pit

[Matthias Apsel]

Hallo Pit,

body {
    white-space: nowrap;
    /* Falls body der umgebende Container ist */
}

table {
    display: inline-table;
}

Bis demnächst
Matthias

Hallo Matthias,

Du hättest diese Frage auch an deinen ersten Thread hängen können. So bleibt zusammen, was zusammen gehört. Da Threads mit neuen Antworten nach oben rutschen, brauchst du auch keine Sorge zu haben, dass er nicht wahrgenommen wird.

Bis demnächst
Matthias

[Pit]

Alles klar, Matthias. Werde ich beim nächsten mal machen.

Pit