[SOLVED] Responsive Table

Hallo
Ich habe übers Weekend meine erste Seite basierend auf dem "Perfect" Template gebaut. Es ist nur eine Seite und nur statischer Text und Bilder.
Nun habe ich in einem Modul (Unsere Leistungen) verschiedene Auflistungen (siehe Bild -> Website ist noch nicht live, daher gibt es noch keinen Live-URL).

Im Moment habe ich die Anordnung der Listen mit einer Tabelle gelöst (siehe Editer Bild), jedoch funktioniert dies nicht im Mobile oder Tablet Rendering (Section ist viel breiter als Rest der Seite)
Ich habe im Code die Spaltenbreite mit % angegeben, damit sie immer im gleichen Verhältnis sind. Code Auszug:

[...]
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 30%; vertical-align: top;">
<p><strong>Grundleistungen</strong></p>
<ul>
<li>Erstkonsultation</li>
<li>Folgeskonsultation</li>
<li>Hospitalisation</li>
<li>Zeugnis ud Identifizierung</li>
<li>Euthanasie</li>
</ul>
</td>
<td style="width: 20px;">&nbsp;</td>
<td style="width: 30%; vertical-align: top;">
<p><strong>Diagnostik</strong></p>
<ul>
<li>Röntgendiagnostik</li>
<li>Blutentnahme</li>
<li>Harnuntersuchung</li>
<li>Kotuntersuchung</li>
<li>Röntgenaufnahme</li>
<li>Ultraschalluntersuchung</li>
</ul>
</td>
[...]
Ich hatte ursprünglich den Titel und den sub-text in einer separaten Section und die Spalten als einzelne Module in der nächsten Section. Da jedoch der Abstand zwischen den Section zu gross ist, machte dies keinen Sinn.

Wie kann ich das Darstellungsproblem lösen, sodass es auch für Mobile und Tablet funktioniert? Ich bin am Ende meines Joomla-Junior-Latein

Auch mit RockSprocket komme ich nicht auf einen grünen Zweig, da ich gerne die Bulletpoints als Auflistung zeigen möchte

Hallo,
Tabellen und mobile ready ist fast nicht möglich oder auch sinnfrei, da die Tabellen auf dem Phone bei einer Breite von 352px nicht nebeneinander dargestellt werden können und somit auch die Tabelle keinen Sinn macht, lesbar ist
Aber eventuell hilft das Uikit > Table
getuikit.com/v2/docs/table.html

Hallo
Besten Dank für die Antwort.
Ich muss nicht unbedingt eine Tabelle benützen. Ich möchte die verschiedenen Kategorien einfach als kleine Kacheln anzeigen lassen, welche jedoch formatierten Text enthalten (Bullet Points). Die Funktionen, welche ich bis anhin gesehen haben erstellen Kacheln, jedoch wir der Text (vom Artikel) unformatiert angezeigt.

Wenn ich es mit einzelnen Modulen in der gleichen Section löse (z.b. alles im top-d), dann ist mir nicht klar wie ich den Einleitungstext als einziges über die Unterkategorien legen kann. (so wie im Bild).
Wenn ich den Titel und Einleitungstext in eine höhere Section verlege (z.b. Titel & Einleitung im top-c, Unterkategorien als einzelne Module im top-d), ist der Abstand zu den Unterkategorien "zu gross" (=Abstand zwischen top-c und top-d). Aber wenn ich im Perfect diesen Abstand reduzieren könnte, wäre ich auch schon ganz happy!
Oder halt irgend eine andere alternative.. ich bin selber mit der Tabelle auch nicht ganz glücklich

Hallo, da gibt es viele Möglichkeiten, dies darzustellen.
Eventuell ein Grid in einem Module
getuikit.com/v2/docs/grid.html

Hallo

Herzlichen Dank! Das war die Lösung zu meinem Problem Ich konnte gleich noch ein paar andere Module mit dem Uikit optimieren. Genial!

Ich habe aber nun noch ein Problem mit dem Template, nämlich die Menu bar ist suboptimal. Desktop Version ist es tip top, Tablett verzieht es sich (d.h. auf zwei Zeilen und Schrift im Vordergrund der Beiträge) und im Mobile rendering erscheint nur noch einen leeren weisser Balken, ohne Inhalt. Passiert im verkleinerten Fenster auf dem Desktop und auf dem Iphone 11 (Browser Chrome, Firefox, und Iphone -> Safari)

Habe ich irgendwas vergessen einzustellen? Bzw. Ich sehe auch nicht wo ich im Perfect Veränderungen diesbezüglich machen könnte,. bzw. wo ich noch schauen könnte.
Das Main-Menu habe ich der Position "menu" assigned.

PS: Bitte melden, wenn ich einen separaten Post für dieses Problem erstellen soll.

Danke und Grüsse

Mélanie