Mobirise Tutorials

Tutorials Übersicht

Eigene scrollbare und sortierbare Bootstrap Tabelle

Datum Beschreibung Kategorie Bemerkung
03.02.2017 Anker setzen HTML Sonstiges
17.03.2017 Mitglieder Bereich PHP Geschützter Bereich
19.03.2017 Code Editor von Mobirise Mobirise Code und Style editieren
20.03.2017 Import, Sicherheit, Updates Mobirise Grundkenntnisse
21.03.2017 Publizieren mit Mobirise Mobirise Grundkenntnisse
20.06.2017 Worterkennung CSS Sonstiges
05.08.2017 Checkbox Auswahl JavaScript Transform
09.08.2017 Elemente verstecken CSS Bootstrap
10.08.2017 Audio MP3 Player JavaScript HTML5
01.09.2017 Formular Mailscript PHP / SMTP Formular
01.09.2017 Formular Mailscript alternativ PHP Formular
01.09.2017 Formular Generator PHP Formular
02.09.2017 Gästebuch PHP MySQL
03.09.2017 Kalender & Google Kalender  PHP MySQL / App
04.09.2017 Kommentare auf Seite PHP MySQL
05.09.2017 Checkbox Hack
CSS Bild Formular Feld
01.10.2017 Fullscreen Hintergrund CSS / jQuery Backstretch
02.10.2017 Instagram Feed Mobirise Erweiterung
03.10.2017 PDF Upload Script PHP Upload
05.11.2017 Modal Layer und Sticky DIV CSS / JavaScript Bootstrap
10.11.2017 Tooltip und Buttons CSS / JavaScript Bootstrap
01.12.2017 Fotoalbum mit Lytebox CSS / JavaScript Lightbox / Lytebox
03.12.2017 Fotoalbum mit Upload PHP Upload
04.12.2017 Farbverlauf im Body CSS Sonstiges
05.12.2017 Farbverlauf im Container CSS Sonstiges
10.12.2017 Suchen im Projekt PHP Sonstiges
07.01.2018 Keyframes CSS Animation
17.01.2018 Testseiten Mobirise Versuche
18.01.2018 Accelerated Mobile Pages AMP Mobil Optimiert
19.01.2018 Shoutbox PHP SQLite
26.01.2018 Gästebuch PHP SQLite
13.02.2018 Mega Menü CSS / JavaScript Bootstrap
13.02.2018 Formular mit Checkbox PHP Formular
16.04.2018 Tabellen Mobirise Tabellen sortieren
27.04.2018 Datepicker CSS / JavaScript Bootstrap
14.06.2018 Datenschutz Hinweis CSS / JavaScript JavaScript
03.07.2018 jQuery Bilder Galerie CSS / JavaScript jQuery Anwendung
10.08.2018 CSS Grid Test CSS Sonstiges
15.08.2018 Schlagwörter Box PHP Sonstiges
16.08.2018 Responsive Hotspots CSS Sonstiges
01.09.2018 Content Management System CMS jocms
02.09.2018 Bootstrap Text Slider CSS / JavaScript Bootstrap
05.09.2018 Horizontales Akkordeon CSS Bootstrap
09.09.2018 Page Overlay CSS / JavaScript Sonstiges
02.10.2018 Formular Eingabe zählen CSS / JavaScript Formular
04.10.2018 Events online eingeben PHP SQLite CMS
07.11.2018 Bilder rotierend drehen CSS Transform
11.11.2018 Datenschutz Hinweis AMP AMP Cookie Alert
18.11.2018 Count Up / Down ab Datum JavaScript Sonstiges
19.11.2018 Uhr analog anzeigen CSS / JavaScript Sonstiges
23.11.2018 Adventskalender PHP / JavaScript Schneefall Feuerwerk
14.12.2018 Fullscreen Background Video CSS Video mit Ton
28.12.2018 WOW Slider Mobirise Erweiterung
09.02.2019 Animierte Blasen und Ballons CSS Animation
16.02.2019 Slideout / Flyout Box CSS Sonstiges
21.02.2019 Bilder Galerie ohne Lightbox CSS Sonstiges
04.03.2019 Cards mit einheitlicher Höhe CSS Bootstrap
13.03.2019 Image Float und Marquee CSS Ticker Lightbox / Laufschrift
13.03.2019 Visual Lightbox CSS / JavaScript Lightbox / Lytebox
16.03.2019 Formular Editor Mobirise Form Builder reCAPTCHA v3
22.03.2019 Social Feed Mobirise Facebook, Twitter, usw.
12.05.2019 Online Website Builder Mobirise Web Online Builder
31.05.2019 Popup Builder Mobirise Modal Lightbox
04.06.2019 Clip Path CSS CSS / polygon Sonstiges
18.07.2019 Video in Mobirise HTML5 Eigenes Video
20.07.2019 Row Reverse Mobirise Navi umkehren
01.08.2019 Timeline Swiper CSS / JavaScript Slider
05.08.2019 Parallax & Fixed CSS Hintergrundbild
14.08.2019 Akkordeon Tabs Link JavaScript Sonstiges
15.08.2019 Karussell Slider CSS / JavaScript Bootstrap
05.11.2019 Formular Generator & Bootstrap PHP / Bootstrap Formular & Datum
04.12.2019 Slideout Bereich JavaScript Sonstiges
06.12.2019 Slideshow CSS / JavaScript Sonstiges
16.12.2019 Tabellen Anker CSS Sprungmarken setzen
06.01.2020 Nachrichten Skript PHP SQLite
12.01.2020 Iframe dynamisch JavaScript Iframe
03.02.2020 Geodaten Foto lesen PHP Metadaten Exif
15.02.2020 Bildvergleich vorher/nachher CSS / JavaScript jQuery Anwendung
09.04.2020 CSS Modal Popup mit Cookie CSS / JavaScript Sonstiges
17.04.2020 Vertikale Menüleiste CSS / Bootstrap Navigation
06.05.2020 Timeline erweitern Mobirise Timeline bearbeiten
07.06.2020 Eigener Slider oder Fader CSS / Bootstrap Bootstrap
10.06.2020 Galerie Anpassungen CSS / Bootstrap Mobirise Lightbox
11.09.2020 Nachrichten Skript PHP CMS MySQL
24.09.2020 Seitenschutz PHP CMS MySQL
08.10.2020 Suchen mittels Google JavaScript Sonstiges
12.10.2020 Events im Popup einschalten PHP SQlite CMS
06.12.2020 Mobirise Forum Mobirise-Tutorials Benutzer Forum
28.12.2020 WhatsApp Button Mobirise Chat
11.04.2021 Uploads und CSV-Datei PHP Mehr Formulare
12.04.2021 Drucken ausgewählter Blöcke CSS Seiten drucken
02.05.2021 Netzwerkadresse am PC  Windows Ordner FTP Daten
06.05.2021 Arclab Formular Generator PHP / SMTP Formular
24.06.2021 Download Archiv PHP SQLite Datenbank
18.11.2021 Eigenes Background Video CSS / HTML5 Eigenes Video
03.01.2022 Kalender mit SQLite PHP SQLite Datenbank
31.03.2022 Karte als Alternative zu Maps JavaScript Google Maps Alternative
25.05.2022 Eigenes Akkordeon CSS Sonstiges
04.07.2022 Link Animation Navi CSS Transform
26.07.2022 Lokale Fonts verwenden CSS Google Fonts ersetzen
30.07.2022 Smart Cart Mobirise PayPal, Stripe, WhatsApp
07.08.2022 Breadcrumb Navigation CSS / Bootstrap Navigation Pfade
06.09.2022 Popup Chat Messenger Dienste Facebook, WhatsApp
01.10.2022 Music Player Webplayer SoundCloud, Spotify
02.12.2022 Wechselbilder nach Tageszeit JavaScript Hintergrundbild
12.12.2022 Video MP4 im Popup Mobirise / JavaScript Popup Builder
22.01.2023 Password Protect Mobirise Erweiterung Passwortschutz Seiten
29.01.2023 Cookies Alert Testseiten Mobirise Erweiterung Cookie Hinweis
02.02.2023 Lupe über Bild JavaScript / jQuery Image Zoom
21.02.2023 Masonry Galerie & Lightbox CSS / jQuery Lightbox / Lytebox
07.04.2023 Sidebar Fixiert Social Media CSS Sonstiges
01.05.2023 Slider Proportional Bild & Video CSS Bootstrap
06.06.2023 Content Management System CMS DynPage
30.07.2023 Akkordeon alphabetisch sortiert Mobirise / JavaScript Sonstiges
14.08.2023 Media Videos CSS YouTube Videos
25.08.2023 Liste und Tabelle mit Preisen CSS Sonstiges
14.09.2023 Sound & Animation mit Maus CSS / JavaScript Sonstiges
01.10.2023 Offcanvas Menü und Sidebar Bootstrap / JavaScript Auslappbare Bereiche
03.10.2023 Künstliche Intelligenz AI Website Builder Mobirise AI / KI
09.10.2023 Tabelle scrollbar und sortierbar Bootstrap / JavaScript Bootstrap Table
08.11.2023 Hervorhebung vom aktiven Menü CSS / JavaScript Highlight Navigation
28.11.2023 Kommentar-Box (neu) PHP MySQL
10.01.2024 Nachrichten Skript PHP News PHP Jabbers CMS MySQL
20.01.2024 Buchungskalender PHP Jabbers CMS MySQL
22.02.2024 Simple CMS PHP Jabbers CMS MySQL
28.02.2024 Fotogalerie CMS PHP Jabbers CMS MySQL
24.03.2024 Letzte Änderung Website JavaScript / PHP Sonstiges
28.03.2024 Menüleiste statisch CSS Navigation
11.04.2024 Formular Generator Neu PHP Jabbers CMS MySQL Formular

Ende der Tabelle

nach oben 

Top Seite  nach oben 

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>

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren