Mon tableau avec les en-têtes pivotés apparaît comme prévu dans Chrome, mais pas dans Firefox.
Comment les faire fonctionner sur tous les navigateurs afin qu'ils pivotent verticalement, soient verticalement en bas de la cellule, soient centrés horizontalement et occupent la largeur minimale ?
J'utilise du code légèrement modifié par rapport à cette réponse pour le faire fonctionner dans 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>
Cela semble fonctionner pour moi, testé sur Chrome, Firefox et iOS Safari :