Vertikal gedrehter Tabellentitel, zentriert + unten ausgerichtet, browserübergreifend

Question

Meine Tabelle mit gedrehten Kopfzeilen sieht in Chrome wie erwartet aus, in Firefox jedoch nicht.

Chrome v108 (vertikal unten, horizontal in der Mitte)✅

Firefox v107 (vertikal in der Mitte, horizontal rechts) ❌

Wie kann man dafür sorgen, dass sie browserübergreifend funktionieren, sodass sie sich vertikal drehen, vertikal am unteren Rand der Zelle liegen, horizontal zentriert sind und die Mindestbreite einnehmen?

Ich verwende einen gegenüber dieser Antwort leicht modifizierten Code, damit er in Chrome funktioniert:

table { border-collapse:collapse; font-family:sans-serif }
thead th {
    /* Rotate vertical: https://stackoverflow.com/a/47245068 */
    -ms-writing-mode:tb-rl;
    -webkit-writing-mode:vertical-lr;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    vertical-align:middle;
    text-align:left;
    padding:0.5em 0 0 0;
    opacity:0.5;
    font-size:90%;
}
tbody th { text-align:right; padding-right:0.5em }
tbody td { text-align:center; padding:0 0.2em }
.yes { font-weight:bold; color:#060 }
.maybe { color:#440 }
.no  { color:#500 }

<table><thead><tr>
    <th></th>
    <th class="yes">yes</th>
    <th class="maybe">maybe</th>
    <th class="no">no</th>
    <th>who?</th>
</tr></thead><tbody><tr>
    <th>Fri, Dec 9, 12pm</th>
    <td class="yes">2</td><td class="maybe">1</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Wed, Dec 14, 12pm</th>
    <td class="yes">4</td><td class="maybe">0</td><td class="no">0</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Fri, Dec 16, 12pm</th>
    <td class="yes">0</td><td class="maybe">0</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr></tbody></table>

Answer 1

这似乎对我有用，在 Chrome、Firefox 和 iOS Safari 上进行了测试：

thead th {
  vertical-align: bottom;
  text-align:     center;
  width:          0.5em;
  min-width:      0.5em;
  padding:        0;
}
thead th span {
  writing-mode: vertical-lr;
  transform:    rotate(180deg);

  /* slight horizontal offset to suit tastes */
  position:relative; left:-2px;
}

/* need following (or explicit width) or else the */
/* cells in the rows will force wrap every word   */
tbody th { white-space:nowrap }

/*************** unrelated formatting ***************/
table { border-collapse:collapse; margin:1em auto }
thead th { font-size:90% }
thead th span { opacity:0.5 }
th, td { vertical-align:middle; padding:0 0.5em }
th { text-align:right; font-weight:normal }

.yes { color:#090; font-weight:bold }
.maybe { color:#660 }
.no  { color:#600 }

tr > * { border-bottom:1px solid rgba(0,0,0,0.2)}
tr:last-child > * { border-bottom: 0 }

    

    
yes
    
maybe
    
no
    
who?

    
Fri, Dec 9, 12pm
    
2
1
1
    
≡

    
Wed, Dec 14, 12pm
    
4
0
0
    
≡

    
Fri, Dec 16, 12pm
    
0
0
1
    
≡