Вертикальный текст в Razor View

Question

У меня есть следующий вид:

@model YFA.ViewModels.YoungFFSkillVM 
@{ 
    ViewBag.Title = "Training for Drill"; 
} 
<div class="row"> 
    <h2>Training for Drill on @Html.DisplayFor(model => model.DrillDate)</h2> 
</div> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    @Html.HiddenFor(m => m.DrillId) 
    <div class="form-group"> 
     <table> 
      <thead> 
       <tr> 
        <th></th> 
        @foreach (var skill in Model.SkillList) 
        { 
         <th class="rotate"><span class="intact">@skill</span></th> 
        } 
       </tr> 
      </thead> 
      <tbody> 
       @for (int i = 0; i < Model.YoungFFs.Count; i++) 
       { 
        <tr> 
         <td> 
          @Html.HiddenFor(m => m.YoungFFs[i].ID) 
          @Html.HiddenFor(m => m.YoungFFs[i].Name) 
          @Html.DisplayFor(m => m.YoungFFs[i].Name) 
         </td> 
         @for (int j = 0; j < Model.YoungFFs[i].Skills.Count; j++) 
         { 
          <td> 
           @Html.HiddenFor(m => Model.YoungFFs[i].Skills[j].ID) 
           @Html.HiddenFor(m => Model.YoungFFs[i].Skills[j].YoungFFId) 
           @Html.CheckBoxFor(m => Model.YoungFFs[i].Skills[j].IsSelected) 
          </td> 
         } 
        </tr> 
       } 
      </tbody> 
     </table> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-1 col-md-10"> 
      <input type="submit" value="Save" class="btn btn-default" /> 
     </div> 
    </div> 
} 

С следующим в CSS сайта:

th.rotate { 
    white-space: nowrap; 
    -webkit-transform-origin: 65px 60px; 
    -moz-transform-origin: 65px 60px; 
    -o-transform-origin: 65px 60px; 
    -ms-transform-origin: 65px 60px; 
    transform-origin: 65px 60px; 

    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
    /*display:inline-block;*/ 
    /*height:30px;*/ 
    /*float:left;*/ 
    /*width:30px;*/ 
} 

span.intact { 
    display:inline-block; 
    width:30px; 
    height:150px; 
} 

Однако я получаю отображается следующий вид:

Имена были заглушены специально.

Как вы можете видеть верхний ряд, который является вертикальным, чтобы обеспечить лучшую разметку, отрубается, а также над заголовком.

Как настроить просмотр или css, чтобы остановить это?

Answer 1

Вы должны установить высоту th.rotate к чему-то весь текст будет вписываться в.

th.rotate { 
    white-space: nowrap;  
    height: 275px; 
} 

th.rotate > .intact { 
    transform-origin: 65px 60px; 
    transform: rotate(270deg); 
    width: 30px; 
} 

Вот a working Bootstrap sample. Я также установил таблицу border="1", чтобы вы могли видеть эффект в образце и использовали <div> вместо <span>.