Tabellen sind nicht responsive und deswegen sollten sie nicht für Layouts verwendet werden, sondern nur für echte tabellarische Inhalte. Ich würde dir da empfehlen mit Flexbox oder CSS Grid zu arbeiten.
Schau Dir mal https://extensions.joomla.org/extension/responsive-tables/ an.
Es gibt im Netz einige Codes für responsive Tabellen. Schmeiß mal eine Suchmaschine an.
...möchte ich dass alles was horizontal nicht Platz hat automatisch in vertikal nachrutscht,
Siehe #2, mit Flexbox oder CSS Grid ist dies möglich.
Setze über css table tr und table td auf display: block; width: 100% und display: none für table tr > td:nth-of-type(n). n steht hier für die Spalte(n), die ausgeblendet werden soll(en).
Da sicher nicht alle Tabellen auf die gleiche Art behandelt werden sollen ist zur eindeutigen Identifizierung zusätzlich die Zuordnung einer Klasse sinnvoll wie z.B. table.tablemyclass
Auf diese Weise können sehr einfach unterschiedliche Tabellentypen für Smartphone angepasst werden. Zwei Beispiele findest Du unter https://www.ig-lilienthal.de/index.php/termine-menu und unter https://www.ig-lilienthal.de/i…-menu/mitgliedschaft-menu am Ende. Einfach mal das Fenster ganz schmal machen.
Aufwendig kann dabei lediglich die Formatierung der umsortierten Tabelle werden. Aber das muss eh' immer getan werden.
Noch eine Ergänzung dazu: für alle tr und alle td muss gesetzt werden height: auto;. Ab einer der letzten Joomla-Updates wird bei Tabellen height automatisch auf einen konkreten Wert gesetzt (warum?). Dass ist dann bei responsive gestalteten Tabellen kontraproduktiv.
Muss ich hier den CSS Code in meine user.css schreiben und den HTML Code in meinen Beitrag?
Genau... ist nicht die schönste Art, weil man im Beitrag HTML Code schreiben muss, aber es geht schon... Meine Empfehlung wäre die Personen als einzelne Beiträgen anzulegen und die Darstellung in einem minimalen Bloglayout oder mit einem Modul.
Mit der Extension Sourcerer kann man relativ problemlos HTML-Code in den Beitrag integrieren, ohne die Code-Ansicht bemühen zu müssen.
Wenn die Namen immer zweizeilig sein sollen (also 1. Zeile Vorname, 2. Zeile Nachname), mach einfach einen Zeilenumbruch (<br />)
.grid-container {
justify-items: center; //damit sparst du das text-align: center in jeder Zeile
justify-content: space-around;
font-family: 'comic sans ms', sans-serif; // muss du nicht in jeder Zeile angeben
font-size: 18px;
font-weight: bold;
}Man soll Inline Style so gut wie es geht vermeiden. Über Comic Sans kann man sich streiten, für bestimmte Sachen ist vielleicht eine nette Schrift.. ich würde mir was anderes suchen...
Damit wird der Text vertikal zentriert
grid-item1 {
height: 100px;
display: flex;
align-items: center;
}Versuche es mal mit .grid-item1 {text-align: center; . . . .}.
Ich habe die Vorgehensweise über Grid selbst ausporbiert und bin anfangs auf das gleiche Problem gestossen.
Im Übrigen denke ich, dass diese Methode für deine Aufgabenstellung die beste ist und deutlich einfacher als über Tabellen. (Anders sieht es nach meiner Erfahrung aus, wenn es sich um strukturierte Tabellen handelt, bei denen Spalten und/oder Zeilen z.B. unterschiedliche Inhalte und unterschiedliche Formatierung haben.)
Danke das war die Lösung!
Versuche es mal mit .grid-item1 {text-align: center; . . . .}.
Ich habe die Vorgehensweise über Grid selbst ausporbiert und bin anfangs auf das gleiche Problem gestossen.
Im Übrigen denke ich, dass diese Methode für deine Aufgabenstellung die beste ist und deutlich einfacher als über Tabellen. (Anders sieht es nach meiner Erfahrung aus, wenn es sich um strukturierte Tabellen handelt, bei denen Spalten und/oder Zeilen z.B. unterschiedliche Inhalte und unterschiedliche Formatierung haben.)
Danke, das war die Lösung!
lg Mario
