Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13054, member: 3917"]
Wenn ich deinen letzten Code übernehme bekomme ich genau das Bild, das Du in Posting #3 gepostet hast. Und ich weiß jetzt wo das schwarze Element her kommt: Es ist der Header und er soll offenbar über der Tabelle und der Sidebar angeordnet werden. Das kann ich relativ leicht mit diesem CSS erreichen:
[CODE]        @media (max-width: 767px) {
            .sidebar {
                padding: 120px 0 0;
            }
        }

html,
        body {
            height: 100%;
        }

body {
            /* Die Elemente darin als Grid einrichten: */
            display: grid;
            /* 2 Spalten, die Breite der linken entspr. Inhalt,
            die rechte füllt den verbleibenden Raum aus: */
            grid-template-columns: auto 1fr;
            grid-template-rows: auto 1fr;
        }

header.navbar {
            /* Der Header soll 2 Spalten überspannen: */
            grid-column: 1/3;
        }

main {
            /* Dieses Element soll bei Bedarf scrollbar sein: */
            overflow: auto;
        }

.main-inner {
            /* Nur um den Container zum Test zu vergrößern
            und sichtbar zu machen: */
            background-color: lightblue;
            height: 200vh;
        }[/CODE]
Wir werden jedoch dann mit den Problemen konfrontiert, die durch das Mischen von Gridlayout mit Bootstrap entstehen: Bei breitem Anzeigefenster sieht es gut aus aber in der Handy-Ansicht funktioniert das Umschalten der Sidebar nicht so richtig gut. Bin unsicher, was ich jetzt empfehlen soll: Entweder auf die einfache Lösung in Posting #2 mit dem margin-left für den Wrapper der Tabelle zurück gehen oder mit CSS das Verhalten so einrichten, dass es passt. Im letzteren Fall müsste man wissen, wie sich die Sidebar verhalten soll: Die Tabelle überdecken? Oder soll die Tabelle horizontal schrumpfen?

Was dieses betrifft:

so verhält sich bei mir die Tabelle schon responsiv: Sie wird breiter oder schrumpft abhängig von der Breite des main-Containers. Allerdings schrumpft sie nur so weit wie das von den Inhalten der Zellen her möglich ist. Das ist ein generelles Problem bei der Darstellung von Tabellen, die in die Breite gehen, in schmalen Browserfenstern. Allerdings gibt es Lösungen dafür, indem man die Anordnung der Zellen umändert.
[/QUOTE]

Authentifizierung