Druckbare Version
Hallo!
Ich versuche meine Tabelle übersichtlicher zu gestalten
Ich habe unter "OverallRanking" auch ein Bild eingefügt, dass die Tabelle so darstellt wie ich sie annähernd gern hätte.
Ich scheitere aber schon an der "Hochkant" Formatierung
Custom CSS ist angelegt. Ich kann die Schrift auch ansprechen, z.B. rot färben, aber "hochkant" will nicht.
Ich habe es hiermit probiertHat jemand eine Idee wo es "klemmt"Code:writing-mode: tb-rl;
Danke
Jörg Basler
Um Texte zu drehen mußt Du das umgebende Element drehen.
Ich würde wohl nicht das th direkt drehen, sondern überlegen ob ich noch ein span mit hineinbaue.PHP-Code:span {transform: rotate(-90deg);}
Laut http://caniuse.com/#search=writing-mode braucht das ggf. Prefixe (und in Chrome unter OSX funktioniert die Seite bereits).
Edit:Code:caption, th {
writing-mode: tb-rl;
}
Probier mal sideways-lr statt th-rl.
Und schau dir bei MDN an, was geht und was nicht.
https://developer.mozilla.org/de/doc..._compatibilityZitat:
[applies to] all elements except table row groups, table column groups, table rows, and table columns
Bei mir geht's in Chrome 50 gar nicht (weder mit noch ohne -webkit-Präfix), in Firefox 45 aber schon, jedenfalls mit sideways …
Außerden würde ich mal modernizr auf die Funktionen beschränken, die du wirklich testen willst und nicht alle einbinden.
Hallo!Zitat:
Zitat von lucina
Was meinst du mit "die Seite funktioniert bereits"?
Ich hatte sowas mal mit 45 Grad gemacht, das sah eigentlich ziemlich gut aus. Seite ist leider in nem geschützten Bereich. Also so, dass die Schrift von links unten mit 45 Grad nach rechts oben geht. So konnte man das noch gut lesen und hatte Platz für lange Überschriften.Zitat:
Zitat von Samuell
Das hatte ich befürchtet ... ich kann kein php und hab nur ne winzige Ahnung wo das hin müsste:oZitat:
Zitat von Andreas
Ist kein PHP, ist CSS. Ich hatte das gestern nochmal versucht, aber nur temporär, d.h. ist wieder weg. Ich hatte es aber mal als Bild gespeichert.
Anhang 17685
Ah, da hab ich mich vom"PHP-Code" schrecken lassen.Zitat:
Zitat von Andreas
Das werde ich mal probieren. So wie in deinem Beispiel hatte ich mir das auch vorgestellt. Danke!
Ich habe es jetzt Ansatzweise hingekriegt. Die Schrift ist schon mal gedreht.Zitat:
Zitat von Andreas
Habe ich eine Custom.css geschriebenCode:table th {
font-size: 0.66667em;
transform: rotate(-70deg);
Aber ich finde nicht den Selektor für die Kästchen die die Schrift umrahmen (sollten)
http://www.droplimits.com/ranking-bend-2016.html
Zuerst solltest du diesen Tabellen ne eigene Klasse geben und die Überschriften in ein SPAN wrappen.
Auch damit das Sortier-Icon nicht mitgedreht wird.PHP-Code:// JS jQuery
$('.ce_table').addClass('deg45');
$('.deg45 th.header').wrapInner('<span></span>');
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.
TH SPANs: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;
}
- 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.
Zum Schluss noch ein Effekt, damit man auch sieht, nach welcher Spalte man sortiert.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;
}
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.PHP-Code:.deg45 th.header:hover,
.deg45 th.header span:hover {
color: #75bb3c;
}
Der letzten Tabellen-Spalte kannst du noch eine andere Breite geben, damit der gekippte Text nicht aus der Tabelle herausragt.
Anhang 17694
Da mir Ruhe, Zeit und Wissen fehlten (die Reihenfolge könnt ihr beliebig verändern) hab ich einen Kleinauftrag an Andreas vergeben, den er so umgesetzt hat, wie ich es mir vorgestellt habe.
Sieht jetzt so aus
http://www.droplimits.com/ranking-bend-2016.html
Bei Lichte im Nachhinein betrachtet natürlich gar nicht so schwer ... aber das ist ja immer so.
Ich hätte es so, mit akzeptablem Aufwand, nicht hinbekommen und bin dankbar für die schnelle Hilfe ... und ein paar zusätzliche Tipps, von einem erfahrenen User.