Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Tabelle wird rechts abgeschnitten

Tabellen sind oft breiter als die Spalte und werden rechts abgeschnitten. Es wird dann am Ende der Spalte ein Scrollbalken angezeigt.

Sie können Tabellen kompakter darstellen, indem Sie in deren Design eingreifen. Diese ist dann aber nicht mehr im UZH Corporate Design.

Konkret verkleinern Sie den Innenabstand der Zellen, das «padding». Dazu geben Sie folgenden Code in den «Seiteneigenschaften» der Seite im Reiter «Scripts» ein:

<style>
.richtext table th, .richtext table td {padding: 0.2rem; padding-left: 0.2rem;}
</style>

Damit übersteuern Sie das Standart-Padding (1rem) und die Tabelle benötigt weniger Platz.

Tabelle mit verkleinertem Innenabstand

2022 A B C D E F G H I J K
Januar 12345 23456 34567 45678 56789 67890 78901 01234 12345 23456 34567

Tabellen und Ausklappfunktion

Ist die Ausklappfunktion der Text/Bild-Komponente aktiviert, werden breite Tabellen rechts ganz abgeschnitten ohne dass ein Scrollbalken erscheint. Mit einer Ergänzung im HTML-Code kann der Scrollbalken wieder unten angezeigt werden.

In der Text/Bild-Komponente wechseln Sie in den Quellcode und geben folgenden Code ein:

Vor der Tabelle (<table>):

<div class="helper-scroll-right hidden"></div>
<div class="helper-scroll">

Nach der Tabelle (</table>):

</div>

Code-Beispiel

<div class="helper-scroll-right hidden"></div>
<div class="helper-scroll">
<table>

</table>
</div>

 

Bsp. 1: Breite Tabelle eingeklappt, ohne Code-Anpassung

2022 A B C D E F G H I J K L
Januar 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890

Bsp. 2: Breite Tabelle eingeklappt, mit Code-Anpassung

2022 A B C D E F G H I J K L
Januar 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890