Du bist nicht angemeldet.

Werbeanzeige

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas
  • Private Nachricht senden

1

12.11.2017, 22:59

CSS Grid Layout Table Overflow

Nachdem mir bei meinem Problem mit dem mobilen Menü sehr geholfen wurde, habe ich jetzt begonnen, meine Website auf ein grid layout umzustellen.

Dazu habe ich vorerst mal drei Spalten mit linker Sidebar, Hauptteil und rechter Sidebar. Der Hauptteil ist wiederum ein Grid mit 4 Zeilen. Ist das nachteilig, das so zu handhaben, also ein grid innerhalb eines grids? Ich habe dabei gedacht, dass ich für eine mobile Version beispielsweise einfach mal die Sidebars weggebe und das innere Grid so bestehen bleibt.

Nun aber zu meinem eigentlichen Problem. Meinem Verständnis nach sollte folgende Zeile den verfügbaren Platz (=gesamte Bildschirmbreite) so unterteilen, dass ich links und rechts eine Spalte mit 1,5rem habe und in der Mitte eine Spalte mit dem restlichen Platz.
grid-template-columns: 1.5rem 1fr 1.5rem;

Das Problem ist allerdings, dass ein Bild oder eine Tabelle, die eben größer ist und in der mittleren Spalte untergebracht ist, diese auch einfach größer macht und alles andere nach rechts aus dem Bildschirm heraus schiebt.
Hier wäre das Beispiel mit dem Bild und hier die Tabelle (bitte den Browser ganz schmal machen und dann neu laden).

Leider habe ich dazu nichts im Internet finden können. Und auch andere Websites, die auf ein grid layout setzen habe ich noch nicht so gefunden, dass ich mir deren Quellcode hätte ansehen können.

Danke schon vorab. :)

2

13.11.2017, 09:24

Für die Tabelle:

Quellcode

1
2
width: 100%;
table-layout: fixed;

Für das Bild; hier hast du feste Größen (B/H) angegeben:

Quellcode

1
2
3
width: 749px;
max-width: 100%;
/* height: 250px; WEG! */


(Maximale) Breiten ggf. nach deinen Wünschen anpassen. ;)

Verwendest du eigentlich die Entwicklerwerkzeuge/-Konsole deines Browsers?
Damit sind solche Probleme ratzfatz Geschichte.
fka tm

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas
  • Private Nachricht senden

3

13.11.2017, 10:44

Vielen Dank dafür. :)
Die Tabelle wird jetzt halt wirklich auf die maximale Breite geschrumpft, womit dann der Text mancher Zellen in die nächsten hinein ragen. Vermutlich ist für so schmale Bildschirme sowieso ein anderes Layout besser, so dass ich quasi eine Responsive Tabelle habe anstatt eine zum Scrollen, wie ich das eigentlich erhofft hatte (scrollbars bei Tabellen sind am Phone sowieso nicht sichtbar). Ich werd mich da auf jeden Fall weiter schlau machen. :)


Verwendest du eigentlich die Entwicklerwerkzeuge/-Konsole deines Browsers?
Damit sind solche Probleme ratzfatz Geschichte.

Ich verwende den Inspektor von Firefox. Damit schaue ich mir auch viele andere Websites an und probiere herum. Es scheint aber offenbar noch am Basiswissen zu fehlen, um solche Probleme einfach selbst lösen zu können. :|

Schorsch

Supermoderator

Beiträge: 5 026

Wohnort: Wickede

Beruf: Student

  • Private Nachricht senden

4

13.11.2017, 10:56

Soweit ich weiß verwendet man Tabellen heutzutage nicht mehr für das Layout. Bootstrap hat ein Gridlayout. Guck doch einfach mal wie das da genau gelöst ist.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

5

13.11.2017, 11:08

Soweit ich weiß verwendet man Tabellen heutzutage nicht mehr für das Layout. Bootstrap hat ein Gridlayout. Guck doch einfach mal wie das da genau gelöst ist.

Jou, Tabellen fürs Layout sollte man nicht mehr verwenden. (macht Käsekönig ja auch nicht)
Datentabellen brauchts jedoch desöfteren. Wobei responsive Tabellen etwas kniffliger zu handlen sind.

Edit
Käsekönig, bzw. Namensvetter:
Du kannst ja innerhalb deiner Media Queries Textgrößen, Padding usw. für kleinere Bildschirme runtersetzen.
Ggf. verzichtbare Spalten einer Tabelle ganz ausblenden.
fka tm

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Michael« (13.11.2017, 11:17)


Schorsch

Supermoderator

Beiträge: 5 026

Wohnort: Wickede

Beruf: Student

  • Private Nachricht senden

6

13.11.2017, 11:21

Jou, Tabellen fürs Layout sollte man nicht mehr verwenden. (macht Käsekönig ja auch nicht)
Datentabellen brauchts jedoch desöfteren. Wobei responsive Tabellen etwas kniffliger zu handlen sind.

Wer lesen kann ;) Mein Fehler.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

7

13.11.2017, 11:29

Das kommt in die Personalakte, Schorsch! 8|
fka tm

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas
  • Private Nachricht senden

8

13.11.2017, 11:56

Du kannst ja innerhalb deiner Media Queries Textgrößen, Padding usw. für kleinere Bildschirme runtersetzen.
Ggf. verzichtbare Spalten einer Tabelle ganz ausblenden.

Genau, das wäre wohl mal ein erster Schritt. :)
Und weiters kann ich dann ja schauen, ob ich solche Dinge, wie zum Beispiel hier umgesetzt, auch umsetzen kann.

9

13.11.2017, 12:20


Und weiters kann ich dann ja schauen, ob ich solche Dinge, wie zum Beispiel hier umgesetzt, auch umsetzen kann.

mmh... :S
Glaube, du kriegst deine Tabelle auch so klein genug.
Vielleicht auch interessant:

Quellcode

1
2
3
4
5
td.longtextcolumn {
width: 10em; 
overflow: hidden;
text-overflow: ellipsis;
}

Schneidet überlangen Text ab ("blabla...")
Ggf. kannst du bei Bedarf den ganzen Text dann per Tooltip oä. anzeigen.
fka tm

David Scherfgen

Administrator

Beiträge: 9 977

Wohnort: Bonn

Beruf: Wissenschaftlicher Mitarbeiter

  • Private Nachricht senden

10

13.11.2017, 13:23

@Michael: Ich wusste gar nicht, dass du so fit bist in Sachen Webdesign! :thumbup:

Werbeanzeige