CSS를 사용하여 GridView 헤더 회전

GridView에서 머리글을 회전해야합니다. 나는 웹 사이트를 수색하고 약간 정보를 찾아 냈다. 그러나 나는 그것을 올바르게 보여줄 방법을 찾지 못했습니다. 머리글 텍스트를 회전 할 수 있지만 항목 행에 표시됩니다. 누군가 그것을 고칠 방법을 말해 줄래?CSS를 사용하여 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; 
}

출처

2017-10-02 user819774

당신이 쓰기 모드에서 시도 https://developer.mozilla.org/en-US를 제공 할 수 있습니다/docs/Web/CSS/writing-mode 예 : rotate()를 원하면 https://codepen.io/gc-nomade/pen/EKQKBe로 테스트하고 실행하십시오. 광고가 있다면 트릭이 있습니다 : https://codepen.io/gc-nomade/pen/Cqkig variante https://codepen.io/gcyrillus/details/EvCHi/ –

당신은 헤더를 회전이 샘플 코드를 시도 할 수 있습니다.

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

출처

2017-10-03 03:29:02 nish

CSS를 사용하여 GridView 헤더 회전

답변

관련 문제