Neues Tabellen-Design für Hueman-Theme

Published by Philipp Schuster on 2015-01-102015-01-10

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

Hueman modifiziert

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.

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.