div의 세로 텍스트 서식 지정

Question

열 머리글 텍스트를 세로로 렌더링하려고하므로 열 수가 좁습니다. 텍스트를 회전하여 div 내에 유지할 수없는 것 같습니다.

빠른 jsfiddle을 만들었습니다.

https://jsfiddle.net/DaveC426914/w674sLbL/9/

내 "사전 문제" 내 데모가 제대로 렌더링되지 않는 것입니다. 데이터를 세 번 반복합니다 (세 개의 17, 세 개의 18 및 세 개의 19). 나는 이유를 모른다.

(내가 시작한 베어 본 Angular fiddle에서 div ng-app = "myApp"을 추가해야했기 때문에 각도를 적용하지 않아야했습니다. 이 div를 수정하면 응용 프로그램이 중단됩니다. 실제 문제을 수정하면 텍스트가 작동하지 않는다는 것입니다. 크기가 100px, 20px 인 좁은 상자에 들어가야 만합니다. 그러면 열이 20px 또는 그 너비에 불과합니다. 그들은 100px 폭으로 렌더링하고 있습니다.

<div class="table-header-cell" ng-repeat="item in headerDates"> 
    {{item.date}} 
</div> 

.table-header-cell { 
    display: inline-block; 
    border: 1px solid grey; 
    margin: 1px 1px 5px; 
    height: 30px; 
    transform: rotate(-90deg); 
     transform-origin: left bottom; 
    width: 100px; 
} 

div 내에서 div를 중첩하는 변형을 시도하고 외부 또는 내부 div에 회전을 적용했습니다. 나는 또한 회전을 전에 회전하기 전에 치수를 100px 및 높이 20px로 설정해 보았습니다. 그러나 지금까지 조합이 작동하지 않았습니다.

Answer 1

내부 div의 텍스트를 줄 바꿈하고 단일 div의 모든 너비 및 회전 대신 변형 및 여백 속성을 적용 해보십시오.

<div ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    <div class="table-header-cell" ng-repeat="item in headerDates"> 
    <div class="innertext"> 
    {{item.date}} 
    </div> 
    </div> 
</div> 
</div> 

와 CSS :

.table-header-cell { 
display: inline-block; 
border: 1px solid grey; 
margin: 1px 1px 5px; 
width: 30px; 
height:90px; 
} 

.table-header-cell .innertext { 
transform: rotate(-90deg); 
width: 150px; 
margin: 0 -60px; 
} 

이 당신에게 당신의 희망을 찾고 결과를 제공한다

는 다음과 같은 HTML을 사용합니다.

이 정보가 도움이되면 답을 표시하고 투표하십시오. 고마워요

Answer 2

각도 ng 반복 문제의 경우,로드 유형이 JavaScript에 대해 "본문에 감싸지 않음"인지 확인해야하며 Angular를 두 번로드 했으므로 두 번째로드를 제거해야합니다.

회전의 경우 컨테이너를 회전시키지 말고 내부 컨테이너를 생성하고 회전시켜야합니다. 이 도움이 https://jsfiddle.net/w674sLbL/10/

희망 : 여기

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
     <div class="table-header-cell" ng-repeat="item in headerDates"> 
      <div class="cell"> 
       {{item.date}} 
      </div>    
     </div> 
    </div> 
</div> 


.table-header-cell { 
    display: inline-block; 
    border: 1px solid grey; 
    margin: 1px 1px 5px; 
    height: 100px; 
    width: 30px; 
} 

.cell { 
    transform: rotate(-90deg); 
    margin-left: -30px; 
    margin-top: 30px; 
    width: 100px; 
} 

은 수정 바이올린입니다.