Облицовочные проблемы на заголовке таблицы вертикальный текст

Question

У меня есть стол. Верхние столбцы заголовка имеют вертикальный текст. Я использовал transform: rotate (-90deg) для этого. Эти вертикальные заголовки должны быть в одной строке. Но он появляется с более чем одной строкой, даже там пустое место top & bottom. Я действительно не знаю, чтобы избежать ..

<table cellspacing="0" cellpadding="0" border="0" class=" verticaltext_table" > 
     <thead> 
      <tr> 
       <th>&nbsp;</th> 
       <th><div>Some Big Titles Goes Here</div></th> 
       <th><div>Some Big Titles Goes Here</div></th> 
       <th><div>Some Big Titles Goes Here</div></th> 
       <th><div>Some Big Titles Goes Here</div></th> 
       <th><div>Some Big Titles Goes Here</div></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Some Left side titles goes here</td> 
       <td>Val 1</td> 
       <td>Val 2</td> 
       <td>Val 3</td> 
       <td>Val 4</td> 
       <td>Val 5</td> 
      </tr> 
     </tbody> 
    </table> 


.verticaltext_table { 
    width:100%; 
    border-collapse: collapse; 
} 
.verticaltext_table thead th 
{ 
    height:250px; 
} 
.verticaltext_table thead th div { 
    -moz-transform: rotate(-90deg); /* FF3.5+ */ 
    -o-transform: rotate(-90deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */ 
    vertical-align: top; 
    padding: 10px 0; 
    /*white-space:nowrap;*/ 
} 
.verticaltext_table th { 

} 
.verticaltext_table td, .verticaltext_table th { 
    padding: 10px; 
    text-align: center; 
    border: solid 1px #999; 
} 
.verticaltext_table thead tr 
{ 
    background:#f2f2f2; 
} 

Вот мои https://jsfiddle.net/wv2mrym6/2/

Заранее спасибо

Answer 1

white-space: nowrap; Использование заставит текст на одну строку.