Tabellenüberschriften vertikal?

[Silentium]

Hallo zusammen!

Wer kennt sie nicht: Tabellen, die als Spalten Produkte und als Zeilen Features zeigen (oder umgekehrt). Inhalte der einzelnen Zellen in der Tabelle sind im einfachsten Fall nur "Ja" "nein" "optional" o.ä. Die Spaltenüberschriften sind also die längsten Zellen in jeder Spalte, irgendwie häßlich. Will man jetzt zum Verkürzen der Spalten nicht für jede Spaltenbeschriftung bzw. -überschrift eine Abkürzung finden, ist eigentlich eine gute Lösung, den Text der Spaltenüberschriften vertikal zu setzen.

Allerdings bin ich bis jetzt weder bei den Tabellen noch bei CSS etwas gefunden, um Text um 90° zu drehen. Kann mir hier bitte jemand auf die Sprünge helfen?

Vielen Dank!

Silentium

[Harlequin]

Yerf!

Allerdings bin ich bis jetzt weder bei den Tabellen noch bei CSS etwas gefunden, um Text um 90° zu drehen. Kann mir hier bitte jemand auf die Sprünge helfen?

Ist mit CSS derzeit nicht möglich. Die einzige mir bekannte Möglichkeit ist per SVG den Text als Vektorgrafik darzustellen und dann zu drehen (geht zumindest im FF3, bei anderen Browsern weis ich's nicht).

...oder eben ganz altmotisch als <img> (mit entsprechenden alt-Text).

Gruß,

Harlequin

[suit]

per SVG den Text als Vektorgrafik darzustellen und dann zu drehen (geht zumindest im FF3, bei anderen Browsern weis ich's nicht).

Im Internet Explorer ist ein SVG-Plugin erforderlich - der Support seitens Adobe wurde aber afaik eingestellt.

[Harlequin]

Yerf!

» per SVG den Text als Vektorgrafik darzustellen und dann zu drehen (geht zumindest im FF3, bei anderen Browsern weis ich's nicht).

Im Internet Explorer ist ein SVG-Plugin erforderlich - der Support seitens Adobe wurde aber afaik eingestellt.

Jo... SVG alleine reicht da auch nicht, damals hats auch im Opera noch nicht funktioniert. (zumindest in der Form, das man einen HTML-Schnippsel per SVG dreht)

Der fehlende SVG-Support ist eigentlich die einzig größere Macke, die der IE8 noch hat...

Gruß,

Harlequin

[Gunnar Bittersmann]

@@suit:

nuqneH

Im Internet Explorer ist ein SVG-Plugin erforderlich

Nein.

th {writing-mode: tb-rl}

Qapla'

[suit]

»» Im Internet Explorer ist ein SVG-Plugin erforderlich

Nein.

Für SVG ist sehrwohl ein SVG-Plugin erforderlich :) Für die allgemeine Lösung natürlich nicht, da hast du recht.

[suit]

Allerdings bin ich bis jetzt weder bei den Tabellen noch bei CSS etwas gefunden, um Text um 90° zu drehen. Kann mir hier bitte jemand auf die Sprünge helfen?

Spontal fallen mit zwei zuverlässige Möglichkeiten ein:

<td class="optional">  
 <span>o</span><span>p</span><span>t</span><span>i</span><span>o</span><span>n</span><span>a</span><span>l</span>  
</td>

Jedes span-Element innerhalb der klasse Optional erhält schlichtweg "display: block; text-align: center;" - die Buchstaben sind dann vertikal untereinander - aber nicht gedeht.

<td class="optional">  
 optional<span></span>  
</td>

Der Text wird durch eine Image-Replacement-Methode durch eine Grafik ersetzt.

[Schuer]

Will man jetzt zum Verkürzen der Spalten nicht für jede Spaltenbeschriftung bzw. -überschrift eine Abkürzung finden, ist eigentlich eine gute Lösung, den Text der Spaltenüberschriften vertikal zu setzen.

Beim Computer muss man allerdings den Kopf drehen, während man beim Text auf einem Stück Papier das Papier drehen könnte.
Vertikaler Text ist am Monitor also nicht allzu günstig.

Wie wäre es als Alternative denn mit horizontal gesetzten Abkürzungen oder Labels, die beim Hovern einen Tooltip mit dem vollen Text zeigen?

Viele Grüße
_Dirk

[Kalle_B]

Wer kennt sie nicht: Tabellen, die als Spalten Produkte und als Zeilen Features zeigen

Das ist doch auch horizontal gut machbar:

-------------------------+
Produkt Z                 !
---------------------+   !
Produkt H             !   !
-----------------+   !   !
Produkt A         |   |   |
--------------+   +   +   +
Feature 1     | J | N | J |
Feature 2     | J | J | J |

Gruß, Kalle

[Gunnar Bittersmann]

@@Silentium:

nuqneH

Kann mir hier bitte jemand auf die Sprünge helfen?

Gerne. Benutze die Suchfunktion des Forums!!!11elf

Die hätte dich zu diesem Thread geführt und auch zu den in diesem Posting verlinkten.

Qapla'

[molily]

Wir hätten noch

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);

für Safari/Chrome und Firefox 3.5 im Angebot.

Mathias

[molily]

<!doctype html>  
<style>  
#th {  
	-webkit-transform: rotate(90deg);  
	-moz-transform: rotate(90deg);  
}  
</style>  
<script>  
[code lang=javascript]var deg2radians = Math.PI * 2 / 360;  
  
function rotate (el, deg) {  
	if (!el.filters) {  
		return;  
	}  
	el.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingmethod='auto expand')";  
	var rad = deg * deg2radians  
		costheta = Math.cos(rad),  
		sintheta = Math.sin(rad),  
		filter = el.filters.item(0);  
	filter.M11 = costheta;  
	filter.M12 = -sintheta;  
	filter.M21 = sintheta;  
	filter.M22 = costheta;  
};  
  
window.onload = function () {  
	rotate(document.getElementById("th"), 90);  
};

</script>
<table>
<tr>
<th id="th">blub</th>
<td>bla</td>
</tr>
</table>[/code]

[Gunnar Bittersmann]

@@molily:

nuqneH

el.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingmethod='auto expand')";

Warum der Aufwand mit JavaScript, wenn IE es doch auch anders kann? (Auch wenn das eine durchaus zweifelhafte Interpretation der CSS-Spec ist.)

Qapla'

[molily]

Warum der Aufwand mit JavaScript

Ich habe nur eine alternative Möglichkeit vorgestellt, die den Ansatz von anderen Browsern auf den IE ausdehnt.

wenn IE es doch auch anders kann?

Na wie du selbst sagst:

(Auch wenn das eine durchaus zweifelhafte Interpretation der CSS-Spec ist.)

Entweder IE setzt die Eigenschaft korrekt u, dann ist writing-mode angebracht, oder er macht es falsch, dann sollte man writing-mode zumindest keinem anderen Browser vorsetzen, weil das nicht zukunftsfähig ist.

Übrigens ist für den IE 8 im standardkonformen Modus -ms-writing-mode nötig, was gleichzeitig die Wahrscheinlichkeit verringert, dass ein anderer Browser die Angabe nicht wie gewünscht, weil standardkonform darstellt.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

oder er macht es falsch, dann sollte man writing-mode zumindest keinem anderen Browser vorsetzen, weil das nicht zukunftsfähig ist.

OK.

Übrigens ist für den IE 8 im standardkonformen Modus -ms-writing-mode nötig

Kann ich nicht bestätigen.

Qapla'