Rotation de l'en-tête GridView à l'aide de css

Je dois faire pivoter l'en-tête dans GridView. J'ai cherché sur le site et trouvé des informations. Cependant, je n'ai pas compris comment le montrer correctement. Je peux faire pivoter le texte de l'en-tête, mais il est affiché sur la ligne d'article. Quelqu'un pourrait-il me dire comment le réparer?Rotation de l'en-tête GridView à l'aide de css

Ma sortie:

Code CSS est ici:

th.test, .test th { 
    font-size: 11px; 
    font-weight: bold; 
    background-color: greenyellow; 
    padding: 5px; 
    text-transform: none; 
    text-align: left; 
    transform: 
    translate(25px, 51px) 
    rotate(315deg); 
    width: 30px; 
}

Source

2017-10-02 user819774

vous pouvez donner un essai à l'écriture en mode https://developer.mozilla.org/en-US/docs/Web/CSS/exemple de mode d'écriture pour tester et jouer avec https://codepen.io/gc-nomade/pen/EKQKBe si vous aimez rotate() inste annonce, alors il y a un truc: https://codepen.io/gc-nomade/pen/Cqkig variante https://codepen.io/gcyrillus/details/EvCHi/ –

Vous pouvez essayer cet exemple de code pour faire tourner l'en-tête.

HTML

<table> 
<thead> 
    <tr> 
    <th>Name</th> 
    <th>John</th> 
    <th>Alex</th> 
    <th>Rose</th> 
    <th>Tim</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td>values</td> 
    <td>xxx</td> 
    <td>yyy</td> 
    <td>zzz</td> 
    <td>xxx</td> 
</tr>

CSS

table { 
margin-top: 100px; 
     } 
th { 
background-color: green; 
transform: rotate(-45deg); 
transform-origin: 0 0 0; 
text-align: left; 
text-indent: 10px; 
    } 
td { 
border: 1px solid black; 
    }

Source

2017-10-03 03:29:02 nish

Rotation de l'en-tête GridView à l'aide de css

Répondre

Questions connexes