Neues Tabellen-Design für Hueman-Theme

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

Ich bin Philipp, studiere Informatik an der TU Dresden und arbeite als Werkstudent im Bereich Software-Entwicklung bei T-Systems MMS. Ich bin 22 Jahre alt und beschäftige mich in meiner Freizeit gerne mit meinem Blog, Programierung, Technik, aber auch mit Joggen und vielen anderen Dingen. Get To Know Me oder schreibt mich an!

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.