Neues Tabellen-Design für Hueman-Theme

Published by Philipp Schuster on

Hueman-Tabelle

Hueman ist ein tolles kostenloses WordPress-Theme mit vielen Anpassungsmöglichkeiten und großer Verbreitung. Das Einzige das mich daran wirklich stört sind die hässlichen Tabellen. Also habe ich mich mal rangemacht und versucht das Design etwas zu verbessern. Die Responsive-Fähigkeiten werden dadurch nicht zerstört.

Verbesserte Kritikpunkte

  • Spalten-Inhalt nicht mehr zentriert, sondern links ausgerichtet
  • zu breite Tabellen werden nicht mehr beschnitten, sondern erhalten eine Scrollbar (das war bei den Standard-Tabellen besonders auf Smartphones im Hochkant-Modus problematisch)
  • Schrift etwas dunkler, damit man sie besser lesen kann
  • alte/bestehende Tabellen werden nicht beeinträchtigt

Hier eine kleine Demonstration mit einer Beispiel-Tabelle:

Original Hueman

MonatEinnahmen in €Gewinnsteigerung in %Anmerkungen
April45463,002 Mitarbeiter entlassen
Mai7636-1,01Ausgefallenes Computer-Netzwerk
Juni86357,34Mehr Bestellungen als erwartet

Hueman modifiziert

MonatEinnahmen in €Gewinnsteigerung in %Anmerkungen
April45463,002 Mitarbeiter entlassen
Mai7636-1,01Ausgefallenes Computer-Netzwerk
Juni86357,34Mehr Bestellungen als erwartet

Zu breite Tabelle mit Scrollbar

Alle Spalten werden grundsätzlich breiter dargestellt, durch den Scrollbalken sind aber immer alle Inhalte erreichbar. Der Balken wird einfach erreicht, in dem um die Tabelle ein Rahmen gelegt wird, der automatisch einen horizontalen Scrollbalken erhält, sofern der Inhalt zu breit wird.

Hueman-Tabelle

In der oberen Tabelle erkennt man klar den abgeschnittenen und nicht erreichbaren Content. In der unteren Tabelle erkennt man am unteren Rand die Scrollbar.

Ich bin kein toller Designer, so ist es aber definitiv besser. Mit wenigen Zeilen Code könnt ihr das auch schon umsetzten. Ich empfehle euch ein WordPress-Child-Theme von Hueman zu verwenden.

Verwendung

Klartext im Beitragseditor
<div class="phip1611-table-frame">
<table> ... </table>
</div>
style.css
/* tables */
.phip1611-table-frame {
  display:block;
  overflow:auto;
}
.phip1611-table-frame table {
  border:1px solid #eee;
}
.phip1611-table-frame td, .phip1611-table-frame th {
  color:#333;
  font-size:15px;
  padding: 8px 12px;
}
.phip1611-table-frame th {
  font-weight:600
}
.phip1611-table-frame td {
  text-align:left !important;
  padding-left: 15px !important;
  min-width:100px;
}

Viel Spaß damit, ich hoffe es hilft euch weiter.


Philipp Schuster

Hi, I'm Philipp and interested in Computer Science. I especially like low level development, making ugly things nice, and de-mystify "low level magic".

0 Comments

Leave a Reply

Your email address will not be published.