Maison > Questions et réponses > le corps du texte
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>
P粉4125335252024-04-05 13:44:34
Cela semble fonctionner pour moi, testé sur Chrome, Firefox et 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 |