CSSを使用してGridViewヘッダを回転

Question

GridViewでヘッダを回転させる必要があります。私はウェブサイトを検索し、いくつかの情報を見つけました。しかし、私はそれを正しく表示する方法を理解していませんでした。ヘッダーテキストは回転させることができますが、項目行に表示されます。誰かが私にそれを修正する方法を教えてくれますか？

マイ出力：

CSSコードはこちらです：

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; 
} 

Answer 1

あなたはヘッダを回転させるために、このサンプルコードを試すことができます。あなたが書き込みモードhttps://developer.mozilla.org/en-USで試してみることができます

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; 
    }