Tajuk jadual diputar secara menegak, dijajarkan di tengah + bawah, penyemak imbas silang

Question

Meja saya dengan pengepala diputar kelihatan seperti yang diharapkan dalam Chrome, tetapi tidak dalam Firefox.

Chrome v108 (bawah menegak, tengah mendatar)✅

Firefox v107 (menegak tengah, mendatar kanan) ❌

Bagaimanakah cara saya menjadikannya berfungsi merentas penyemak imbas supaya ia berputar secara menegak, menegak di bahagian bawah sel, berpusat secara mendatar dan mengambil lebar minimum?

Saya menggunakan kod yang diubah suai sedikit daripada jawapan ini untuk menjadikannya berfungsi dalam Chrome:

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

Ini nampaknya berfungsi untuk saya, diuji pada Chrome, Firefox dan 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
    
≡