OberKnut: ms-writing-mode tb-rl

Hallo Zusammen, ich habe ein Problem mit der Formatierung eines Tabellenkopfes.

Ich möchte den Head vertikal und gedreht darstellen, sodass die tabelle nicht enorm an Breite gewinnt.

Mit

-ms-writing-mode: bt-rl;

transform:rotate(180deg);

Funktioniert das auch erst einmal ganz gut. Genutzt wird der IE. Nun wird der Text aber OBEN ausgerichtet, und bildet dann entsprechend nach unten zum Rest der tabelle ein eine Lücke.

Ich möchte den Text gerne unten (valign:bottom) ausgerichtet haben, aber ich bekomme es einfach nicht hin.

wenn ich das richtig verstanden habe, müssten der writing mode: BT-RL bedeuten: BOTTOM-to-TOP, RIGHT-to-LEFT Ausgerichtet wird aber immer TOP-to-BOTTOM. Mein CSS:

#vertical { color: #232f3f; font-size: 17px; padding: 10; font-family: Calibri; -ms-writing-mode: bt-rl; transform:rotate(180deg);

}

ursprünglich getestet mit

th { color: #232f3f; font-size: 17px; padding: 10; font-family: Calibri; -ms-writing-mode: bt-rl; transform:rotate(180deg);

}

da ich dann befürchtete, dass der zentrierte TH mir in die Quere kommen könnte, habe ich aus dem HEAD normale TD's gemacht und ein div id="vertical" drumgeschnürt Aber das Ergebnis bleibt. vertical-align, valign, margin-bottom habe ich ebenfalls mit ins CSS aufgenommen, aber ohne Erfolg

Könnt ihr mir sagen, was ich falsch mache ? Ich werd hier Irre :)

Grüße

    1. Genutzt wird der IE.
    2. Ich werd hier Irre

    Ich habe mal eben Ursache (1.) und Wirkung (2.) zusammensortiert.

    -ms-writing-mode

    Hersteller-Präfixe haben einen eingebauten Alpha-Status, genau genommen stets auch ein includiertes „deprecated“.

    1. hi und danke für deine Anteilnahme

      zunächst einmal möchte ich beiläufig erwähnen, dass ich deine Raketendynamik wirklich erstrebenswert finde. Pädagoge, Programmplaner und jetzt problemdiagnostiker. Ganz großes Kino :D

      Du meinst also, dass der blöde olle IE einfach zu oll und doof ist, um die gedrehten Zellen auch noch korrekt auszurichten? Da ich im Arbeitsumfeld tätig bin, und wir Intranetseitens nur den IE zur Verfügung haben, würde dass das Aus bedeuten. Das Aus. DAS AUS. Ich hoffe du bist auch RaketenPsychologe

      (:

      1. Ich jebbe ja die Tabellen nicht. Aber wäre:

        Nur den ersten Buchstabe in die Zellen eintragen und den ganzen Text als title eine Lösung?

        <th title="Montag">M</th>
        
  1. @@OberKnut

    Genutzt wird der IE.

    Ein Untoter.

    Nun wird der Text aber OBEN ausgerichtet, und bildet dann entsprechend nach unten zum Rest der tabelle ein eine Lücke.

    Ich möchte den Text gerne unten (valign:bottom) ausgerichtet haben, aber ich bekomme es einfach nicht hin.

    Da die gesamte Box um eine halbe Drehung (bzw. um 180°; kennt der IE die Einheit turn?) gedreht wird, muss die Ausrichtung (vor der Drehung) nach oben erfolgen.

    Jedenfalls in anderen Browsern (Codepen); IE zum Testen habe ich gerade keinen.

    ein div id="vertical" drumgeschnürt

    “vertical” ist keine sinnvolle ID. Und da evtl. mehrere Kopfzellen vertical beschriftet werden sollen, ist der Einsatz einer ID (die einmalig sein muss!) dafür nicht sinnvoll.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Servus, und dankeschön,

      ja das war ein Versuch, da ich's einfach nicht hinbekommen habe auch wenn ich im css (gleich als erstes) align:left/right/mitte/hose eintrage, ändert sich die Position des Textes nicht. Gedreht und "gespiegelt" wird problemlos. nur die Ausrichtung in der Box (th) findet nicht statt :/

    2. Positiv in Firefox

      • Version Mozilla Firefox 68.4.1esr

      Negativ im Chromium

      • Version 79.0.3945.130 (Offizieller Build) Built on Ubuntu , running on Ubuntu 18.04 (64-Bit)

      Fehler:

      • kommt mit transform: rotate(0.5turn); nicht klar. (Die Überschriften "liegen dann auf dem Rücken", also Rotation um 180 Grad.)
      • trägt man "90deg" ein, dann wird die Katastrophe noch heftiger: Text zwar gedreht, aber vertikal mittig und die Zellen haben trotzdem die originale Breite, also die vor dem Drehen...
      1. ich hätte tatsächlich nicht gedacht, dass das ein solches Schauspiel wird 😆

      2. @@Raketentester

        Negativ im Chromium

        Grmpf, immer diese minderwertigen Browser. Chromia können keine Tabellenzellen drehen?

        Note to self: nicht von „in anderen Browsern“ im Plural reden, wenn’s nur ein anderer Browser ist.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
  2. Hallo OberKnut,

    bei mir funktioniert es in IE11 und Chrome, wenn ich analog zum Beispiel in der MDN ein span um die Inhalte der Überschriften lege. Das erlaubt eine genauere Steuerung von Drehung und Ausrichtung.

    Ohne span schreibt Chrome bei mir nicht vertikal. Entweder mache etwas falsch, oder writing-mode für th oder td ist nicht zulässig.

    .vertHead th  {
       border: 1px solid red;
       width: 6em;
       vertical-align: bottom;
       text-align: center;
    }
    
    .vertHead th span {
       -ms-writing-mode: bt-lr;
       writing-mode: vertical-lr;
       transform:rotate(180deg)
    }
    
    <table>
    <thead>
    <tr class="vertHead">
    <th><span>Klingt interessant</span></th>
    <th><span>Ist es aber nicht</span></th>
    <th><span>Copacabana</span></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    </tr>
    </tbody>
    </table>
    

    Rolf

    --
    sumpsi - posui - clusi
    1. hi und Danke Rolf, ich probiere das SPAN mal herumzulegen

      1. hi und Danke Rolf, ich probiere das SPAN mal herumzulegen

        Mit <span> funktionierts :))))))))))))))))))

        Dankeschön !!!

  3. Dieser Beitrag wurde gelöscht: Beitrag ist Spam.