테이블 셀에서 회전 된 텍스트의 수직 정렬

테이블 헤더의 텍스트를 회전시키고 셀의 아래쪽에 정렬하려고합니다. 수직 정렬은 아무것도 변경하지 않으므로 div의 각 요소를 감싸고 성공하지 못하게하는 방식으로 작동하려고했습니다. http://jsfiddle.net/pelagic/faLVN/테이블 셀에서 회전 된 텍스트의 수직 정렬

HTML

<div id="galley"> 

<table width="115%"> 
<thead><tr> 
    <th width="7%" rowspan="2" class="vertical-label"><div class="vheader">One</div></th> 
    <th width="7%" rowspan="2" class="vertical-label"><div class="vheader">One</div></th> 
    <th width="7%" rowspan="2" class="vertical-label"><div class="vheader">One</div></th> 
    <th colspan="11">Regions</th> 
    <th width="25%" rowspan="2" class="vertical-label"><div class="vheader">References</div></th> 
</tr> 
    <tr> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Antarctic</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Arctic</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Baltic Sea</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Black Sea</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Caspian Sea</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Indo Pacific</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">Mediterranean Sea</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">North Atlantic</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">North Pacific</div></th> 
    <th width="auto" height="130px" class="vertical-label"><div class="vheader">South Atlantic</div></th> 
    <th width="auto" height="100px" class="vertical-label"><div class="vheader">South Pacific</div></th> 
    </tr> 
</thead> 
<tfoot></tfoot> 
<tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr class="alt"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
</tbody> 
</table> 
</div>

CSS

#galley { 
    width: 738px; 
    height: auto; 
    border: 1px #CCCCCC; 
    float:none 
} 

#galley table, th, td { 
    border: 1px solid black; 
    border-collapse:collapse; 
} 

#galley th.vertical-label{ 
    -webkit-transform: rotate(270deg) ; 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    writing-mode: lr-tb; 
} 

#galley th, th.vertical-label{ 
    font-family: "myriad Pro"; 
    font-decoration: bold; 
} 

#galley .vheader{ 
    display:table-cell; 
    vertical-align:bottom 
}

출처

2014-04-11 user3506709

NB :'height = "130px"'가 잘못되었습니다. 그것은 HTML에서'height = "130"'이거나 CSS에서'height : 130px'의 곳으로 옮기는 것이 더 좋습니다 – RoToRa

사용 transform-origin

#galley th.vertical-label{  
    -webkit-transform: rotate(270deg) translateX(100%) translateY(33%); 
    -moz-transform: rotate(270deg) translateX(100%) translateY(33%); 
    -o-transform: rotate(270deg) translateX(100%) translateY(33%); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    writing-mode: lr-tb; 
}

에서 예를 들어이있다

출처

2014-04-11 08:23:31 4dgaurav

세포는 어떤 종류의 정렬을합니까? 처음 3 개의 세포를 보면, 그것이 중간인지 최고인지 거의 말하지 않습니다. 다음 세포는 '바닥'의 정렬을 갖는 것처럼 보이지만 실제로는 그렇지 않습니다. 이것은 단지 수용 가능한 해결책 일 뿐이다. OP의 바이올린 에서처럼 모두 중간에 들게하는 것이 더 좋다고 생각하는 동안 우리는 그들을 모두 '바닥'으로 만들 수 없습니다. –

그것들을 중간에 가지고있는 것이 더 낫지 만 여기서는 변환의 원점을 변경하기 위해 CSS 변환과 함께 transform-origin 속성을 사용하려고했습니다. 거기에 다른 대안이 있습니까? – 4dgaurav

테이블 셀에서 회전 된 텍스트의 수직 정렬

답변

관련 문제