Mobirise Tutorials

Tabelle scrollbar mit fixiertem Header

zur Tabelle 

Ich habe hier diese recht lange Tabelle scrollbar gemacht, damit die Seite nicht übermäßig lang erscheint, ansonsten ist diese Tabelle gleich mit der in meinem Tutorial bereits beschriebenen Tabelle.

Beachtet bei der Google Übersetzung, dass dabei die Sortierung im Tabellenkopf eventuell nicht ganz stimmt, da die Satzstellung in einer anderen Sprache meist anders ist.

Diese Tabelle ist für mich eine Alternative mit dem gleichen Inhalt zu der alten Tabelle der "Mobirise4" Themen, die in den Themen von "Mobirise5" nicht mehr korrekt funktioniert und auch nicht mehr vorhanden ist.

Dazu habe ich um das <table> Tag noch meine <div id="mybox" class="box"> gesetzt, um diesen Bereich scrollbar zu machen und dieser Class meine CSS zu geben. Die ID benötige ich noch für mein JavaScript um in der Box schnell nach oben scrollen zu können. Aus dem <div> darunter, muss die Bootstrap class="table-responsive" entfernt werden, die ich in meinem Tutorial beschreibe, da sonst das "sticky" (beim Scrollen fixieren) am Tabellen-Kopf nicht wirkt und ich hier anstelle dessen einen extra horizontalen Scroller eingebaut habe. Weiterhin erhält das <table> Tag noch meine zusätzliche class="tablehead".

<div id="mybox" class="box">
  <div class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
    <table class="table table-striped table-hover sortierbar tablehead">
      <thead mbr-text>
        <tr>
          <th class="sortierbar sortiere-" scope="col">Datum</th>
          <th class="sortierbar sortiere" scope="col">Beschreibung</th>
          <th class="sortierbar" scope="col">Kategorie</th>
          <th class="sortierbar sortiere" scope="col">Bemerkung</th>
        </tr>
      </thead>
      <tbody mbr-text>
         <tr>
          <td>03.02.2017</td>
          <td><a href="https://www.mobirise-tutorials.com/Eigene-Anker.html" target="_blank" class="text-primary">Anker setzen</td>
          <td>HTML</td>
          <td>Sonstiges</td>
         </tr>
      </tbody>
    </table>
  </div>
</div>


Nun habe ich diese beiden zusätzlichen CSS Klassen in den "CSS Editor" vom Block geschrieben.

Mit der class="box" wird das äußere <div> meiner Box um die Tabelle gestylt, mit der ihr die Höhe des angezeigten Tabellenbereichs definieren könnt. Die Standard-Höhe "height", die maximal erweiterbare Höhe "max-height" und auch die Mindesthöhe "min-height", wobei "vh" für "viewport height", die Höhe des Ansichtsfensters, steht. Natürlich könnt ihr diese Werte beliebig anpassen.

Mit der class="tablehead" ist die Kopfzeile oben fest gepinnt, die Schrift in weiß und der Hintergrund in einer anderen Farbe dargestellt.

div.box {
  height: 62vh;
  max-height: 90vh;
  min-height: 300px;
  overflow-y: scroll;
  resize: vertical;
  background-color: #bde5f9;
}
table.tablehead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #ffffff;
  background-color: #0d5072;
}


Wer möchte, der kann auch noch diese CSS Klassen für einen gestylten Scrollbalken der Browser in den "CSS Editor" vom Block schreiben, wobei der Selektor * für alle CSS Elemente steht.

/* Firefox */
* {
   scrollbar-color: #0d5072 #bde5f9;
}
/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 12px !important;
}
*::-webkit-scrollbar-track {
  background: #bde5f9 !important;
}
*::-webkit-scrollbar-thumb {
  background-color: #0d5072 !important;
  border-radius: 20px !important;
  border: 2px solid white;
}


Bei dieser Tabelle habe ich die Anzeige der Zählung von den Einträgen über die Tabelle kopiert. Dabei gestalte ich den Schrifttyp mit etwas CSS. Die eigentliche Anzeige wird mit der Variable "myOutput" auf die id="myOutput" im Script gegründet.

<div id="myOutput" style="color: #232323; font-size: 0.8rem; line-height: 0.8rem; margin-bottom: 10px;" class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7"></div>

Nun wollte ich noch gerne die Möglichkeit schaffen nur die Tabelle mit einem "Scroll-To-Top" Script zu versehen, damit ein komfortables nach oben scrollen von nur der Tabelle ermöglicht wird. Kopiert hierfür dieses JavaScript in den Seiteneinstellungen zusätzlich in den Bereich "End of <body> code", welches sich auf die id="mybox" der scrollbaren Box bezieht:

<!-- Scroll-To-Top of table div box -->
<script>
function tableScrollTop() {
  const element = document.getElementById('mybox');
  element.scroll({
    top: 0,
    behavior: 'smooth'
  });
}
</script>


Zum Ausführen habe ich diesen Link mit einer onClick Anweisung zum Aufruf dieser JavaScript Funktion "tableScrollTop()" unter die Box kopiert. Zusätzlich habe ich das Mobirise-Icon "sli-arrow-up-circle" in einem <span> Bereich angezeigt. Die Style-Anweisung "float: right" zeigt diesen Link rechts an:

<a href="javascript: void();" class="text-primary" style="float: right;" onclick="tableScrollTop()">nach oben <span class="sli-arrow-up-circle mbr-iconfont mbr-iconfont-btn"></span></a>

Nun wollte ich auch die Möglichkeit schaffen nur die Tabelle mit einem "Scroll-To-Bottom" Script zu versehen, damit ein komfortables nach unten scrollen von nur der Tabelle ermöglicht wird. Kopiert hierfür dieses JavaScript in den Seiteneinstellungen zusätzlich in den Bereich "End of <body> code", welches sich auf die id="mybox" der scrollbaren Box bezieht:

<!-- Scroll-To-Bottom of table div box -->
<script>
function scrollToBottom() {
  const scrollContainer = document.getElementById('mybox');
  scrollContainer.scrollTo({
    top: scrollContainer.scrollHeight,
    behavior: 'smooth'
  });
}
</script>


Hier habe ich ein <div> mit der Bootstrap 5 class="d-flex justify-content-between" mit zwei inneren <div> Containern über der Tabelle dargestellt, um eine einzelne Zeile zu formatieren. Zum einen die Anzeige vom Filter linksbündig und zum anderen den Link zum Scrollen "Scroll-To-Bottom" rechtsbündig.

<!-- Row above table -->
<div class="d-flex justify-content-between">
    <div>
      <!-- Display filter table with id="myOutput" -->
      <div id="myOutput" style="color: #232323; font-size: 0.8rem; margin-bottom: 10px;" class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
      </div>
    </div>
    <div>
      <!-- Scroll table down -->
      <div style="color: #232323; font-size: 0.8rem; margin-bottom: 10px;" class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
        <a href="javascript: void();" class="text-primary" onclick="scrollToBottom()">nach unten <span class="sli-arrow-down-circle mbr-iconfont mbr-iconfont-btn"></span></a>
      </div>
    </div>
</div>