Protostar: Tabellendarstellung ändern

jdgf · 28. August 2018

Hallo,

ich möchte, dass bei Tabellen immer die erste Spalte stehen bleibt und die restlichen Spalten nach links gescrollt werden können. Den Code dazu habe ich hier gefunden.

Code

<div class="table-scrollable">
<table>
…
</table>
</div>

table { /* Styling der Tabelle */ }

.table-scrollable {
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

Alles anzeigen

Ich habe den Code in die user.css im template protostarbearbeitet (=Standardtemplate) eingefügt. Nach meiner Kenntnis greift Joomla zuletzt auf die user.css zu, sodass die vorhergehenden Definitionen aufgehoben werden. Das klappt bei meiner Webseite nicht. Auf Mobilgeräten wird dieTabelle nicht wie gewünscht dargestellt.

Weiß jemand eine Lösung? Link zur Webseite (Joomla 3.8.11, php7. )Die Tabelle in dem Bericht müsste auf Mobilgeräten die gewünschte Darstellung zeigen.

Gruß Dietmar

Indigo66 · 28. August 2018

Hat nichts mit dem Template zu tun, sondern allgemein.

In einer etwas erweiterten Form: http://bloggerschmidt.de/demos/html/responsivetable/
Tutorial: http://bloggerschmidt.de/2015/…ive-Tabellen-mit-CSS.html

anka · 28. August 2018

Aendere im user.css die maximale Breite von 200px auf 480px.

aus

@media only screen and (max-width: 200px)

wird

@media only screen and (max-width: 480px)

Indigo66 · 28. August 2018

Ja ist mir auch aufgefallen max-width: 200px ist bisschen arg schmal.

jdgf · 29. August 2018

Hallo an alle,

vielen Dank für die Hilfe. Die Änderung der Breite auf 480 px war die Lösung.

VG Dietmar

PS: Das Problem ist gelöst. Ich kann den Beitrag leider nicht für erledigt markieren, da mir über meinem ersten Beitrag nur der "blaue Antworten-Button" angezeigt wird.