Mobirise Tutorials

Tabelle mit rechtsbündigen Preisen

Hier habe ich eine eigene Tabelle mit 2 Spalten erstellt und die Preise dabei rechtsbündig gestellt und den Raum davor mit Punkten, den sogenannten "Dot Leaders", gefüllt.

Wie ich die Tabellenspalten sortierbar gemacht habe, könnt ihr hier lesen.

Dazu habe ich mir folgende CSS erstellt und diese in den Bereich "CSS Editor" vom "Code Editor" kopiert:

// Table 100% width
table#Tabelle1 {
  margin: Auto;
  width: 100%;
}
table#Tabelle1 tr th, table#Tabelle1 tr td {
  padding: 10px;
}
// Position of price
.position {
  text-align: right;
}
// Class of table cell
.tabellenzelle {
  width: 70%;
  position: relative;
}
// Class of table cell with dots
.tabellenzelle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 50%;
  border-bottom: 3px dotted #a2a2a2;
}
// Class of table cell with dots for small displays
@media (max-width: 767px) {
  .tabellenzelle::before {
    width: 60%;
  }
}


Zum Einbau des Tabellen-Codes habe ich hier einen einfachen Textblock aus der Rubrik "Article" gewählt.

Hier könnt ihr eine Tabelle am Generator von Werner-Zenk.de generieren lassen:

https://werner-zenk.de/tools/tabelle.php

Hier könnt ihr zusätzliche Bootstrap-Klassen einsehen:

https://getbootstrap.com/docs/5.0/content/tables/

Bemerkung: das Mobirise-Attribut mbr-text habe ich nur hinzugefügt, damit der Inhalt auf der Arbeitsseite editierbar ist.

Der Tabellen-Code gehört in den Bereich "HTML Editor" vom "Code Editor":

<table id="Tabelle1" class="table table-striped table-success table-hover">
  <thead>
    <tr>
      <th mbr-text>Gericht</th>
      <th mbr-text class="position">Preis €</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td mbr-text>Brot</td>
      <td mbr-text class="position tabellenzelle">1,50 €</td>
    </tr>
    <tr>
      <td mbr-text>Hühnchen</td>
      <td mbr-text class="position tabellenzelle">8,50 €</td>
    </tr>
    <tr>
      <td mbr-text>Ente</td>
      <td mbr-text class="position tabellenzelle">16,00 €</td>
    </tr>
    <tr>
      <td mbr-text>Fisch</td>
      <td mbr-text class="position tabellenzelle">18,00 €</td>
    </tr>
  </tbody>
</table>


Unten noch ein Screenshot vom "Code Editor" mit dem oben gezeigten Code und der CSS.

Siehe auch dieses Beispiel mit CSS float 

Viel Erfolg beim Nachbau.