Zuerst solltest du diesen Tabellen ne eigene Klasse geben und die Überschriften in ein SPAN wrappen.
PHP-Code:
// JS jQuery
$('.ce_table').addClass('deg45');
$('.deg45 th.header').wrapInner('<span></span>');
Auch damit das Sortier-Icon nicht mitgedreht wird.
THs:
- Bei dem TH setzt du dann das Hintergrund-Icon auf 'right bottom'.
- Padding und Border entfernst du, bzw. gibts noch ein Padding nach oben, damit das Gedrehte dort Platz hat.
- Die THs dann noch auf eine maximale Breite setzen, weil auch wenn der Text gedreht wird, sich die Breite vom TH immer noch an der Länge des Textes orientiert.
PHP-Code:
.deg45 th.header {
background-position: right bottom;
padding: 100px 0 0;
border: 0 none;
max-width: 50px;
cursor: pointer;
font-size: 11px;
font-weight: normal;
}
TH SPANs:
- Die SPANs kannst du nur drehen, wenn sie block od. inline-block sind. Der Effekt des Borders ist da ein anderer bei block oder inline-block.
- Drehen ist ja bekannt.
- Die SPANs bekommen dann diese Linie (einen Border oben).
- Mit transform-origin positionierst du das Gedrehte ganz zum Schluss so, dass der Anfang des Borders (Die Linie oben) genau dort ist, wo du sie haben möchtest.
PHP-Code:
.deg45 th.header span {
display: block;
transform: rotate(-45deg);
transform-origin: 23px 10px;
border-top: 1px solid #ccc;
min-width: 170px;
padding: 1px 0 0 20px;
cursor: pointer;
white-space: nowrap;
}
Zum Schluss noch ein Effekt, damit man auch sieht, nach welcher Spalte man sortiert.
PHP-Code:
.deg45 th.header:hover,
.deg45 th.header span:hover {
color: #75bb3c;
}
Falls du das benutzen solltest, wirst du die Werte genau an deine Wünsche anpassen wollen. Das kannst du nur mit den Entwickler-Tools im Browser, ich hab's mit Firebug gemacht.
Der letzten Tabellen-Spalte kannst du noch eine andere Breite geben, damit der gekippte Text nicht aus der Tabelle herausragt.
deg45.png
Lesezeichen