Tabellenbeschriftung hochkant

[eisenherz]

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 probiert

writing-mode: tb-rl;

Hat jemand eine Idee wo es "klemmt"

Danke
Jörg Basler

[Samuell]

Um Texte zu drehen mußt Du das umgebende Element drehen.

    span {transform: rotate(-90deg);} 

Ich würde wohl nicht das th direkt drehen, sondern überlegen ob ich noch ein span mit hineinbaue.

[lucina]

Laut http://caniuse.com/#search=writing-mode braucht das ggf. Prefixe (und in Chrome unter OSX funktioniert die Seite bereits).

Edit:

caption, th {
    writing-mode: tb-rl;
}

[michelb]

Probier mal sideways-lr statt th-rl.

Und schau dir bei MDN an, was geht und was nicht.

[applies to] all elements except table row groups, table column groups, table rows, and table columns

https://developer.mozilla.org/de/doc..._compatibility

Bei mir geht's in Chrome 50 gar nicht (weder mit noch ohne -webkit-Präfix), in Firefox 45 aber schon, jedenfalls mit sideways …

[michelb]

Außerden würde ich mal modernizr auf die Funktionen beschränken, die du wirklich testen willst und nicht alle einbinden.

[eisenherz]

Laut http://caniuse.com/#search=writing-mode braucht das ggf. Prefixe (und in Chrome unter OSX funktioniert die Seite bereits).

Edit:

caption, th {
    writing-mode: tb-rl;
}

Hallo!
Was meinst du mit "die Seite funktioniert bereits"?

[Andreas]

Um Texte zu drehen mußt Du das umgebende Element drehen.

    span {transform: rotate(-90deg);} 

Ich würde wohl nicht das th direkt drehen, sondern überlegen ob ich noch ein span mit hineinbaue.

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.

[eisenherz]

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.

Das hatte ich befürchtet ... ich kann kein php und hab nur ne winzige Ahnung wo das hin müsste

[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.
Text_elements_-_Contao_Official_Demo_-_2016-05-04_01.09.44.png

[eisenherz]

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.
Text_elements_-_Contao_Official_Demo_-_2016-05-04_01.09.44.png

Ah, da hab ich mich vom"PHP-Code" schrecken lassen.
Das werde ich mal probieren. So wie in deinem Beispiel hatte ich mir das auch vorgestellt. Danke!

[eisenherz]

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.

Ich habe es jetzt Ansatzweise hingekriegt. Die Schrift ist schon mal gedreht.

table th {
    font-size: 0.66667em;
transform: rotate(-70deg);

Habe ich eine Custom.css geschrieben

Aber ich finde nicht den Selektor für die Kästchen die die Schrift umrahmen (sollten)
http://www.droplimits.com/ranking-bend-2016.html

[Andreas]

Zuerst solltest du diesen Tabellen ne eigene Klasse geben und die Überschriften in ein SPAN wrappen.

// 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.

.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.

.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.

.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

[eisenherz]

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.