Maison  >  Questions et réponses  >  le corps du texte

Titre du tableau pivoté verticalement, centré + aligné en bas, multi-navigateur

Mon tableau avec les en-têtes pivotés apparaît comme prévu dans Chrome, mais pas dans Firefox.

Chrome v108 (bas vertical, milieu horizontal)✅

Firefox v107 (milieu vertical, horizontal droit) ❌

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粉036800074P粉036800074179 Il y a quelques jours348

répondre à tous(1)je répondrai

  • P粉412533525

    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 211
    Wed, Dec 14, 12pm 400
    Fri, Dec 16, 12pm 001

    répondre
    0
  • Annulerrépondre