Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13483, member: 3917"]
Anscheinend hast Du es schon selbst heraus gefunden. Oder hat ein Moderator den Code formatiert?

Ich dachte erst, das Ganze sei eine Kleinigkeit aber damit habe ich mich anscheinend getäuscht. Das Problem konnte ich im Firefox reproduzieren und ich habe den Eindruck gewonnen, dass hier ein Fehler im FF vorliegt. Das Verfahren mit dem writing-mode hat den Vorteil, dass sich die Höhe abhängig von der Textlänge anpasst. Geht man auf das bewährte [ICODE]transform: rotate(-90deg);[/ICODE] zurück, geht dieser Vorteil verloren.
Das ist ein wenig unbefriedigend aber ich habe trotzdem eine Lösung gemacht wo Javascript die Höhe entspr. dem längsten Text berechnet:
[CODE]<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Tabelle mit senkrechter Beschriftung</title>
    <style>
        th {
            padding: 5px;
            background-color: lightblue;
            border: 1px solid white;
            display: flex;
            align-items: flex-end;
        }

thead tr {
            display: flex;
            align-items: flex-end;
        }

th.vertical {
            max-width: 1em;
        }

th.vertical span {
            display: inline-block;
            max-width: 100%;
            transform: rotate(-90deg);
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Zeit</th>
                <th>Summe</th>
                <th class="vertical"><span>Ergänzen</span></th>
                <th class="vertical"><span>Addieren</span></th>
                <th class="vertical"><span>Subtrahieren</span></th>
            </tr>
        </thead>
    </table>
    <script>
        let maxHeight = 0;
        document.querySelectorAll('th.vertical span').forEach(item => {
            if (item.scrollWidth > maxHeight) {
                maxHeight = item.scrollWidth;
            }
        });
        document.querySelectorAll('th').forEach(item => {
            item.height = maxHeight + 'px';
        });
    </script>
</body>

</html>[/CODE]
[/QUOTE]

Authentifizierung