縦書きテキスト

Question

私は、次のビューがいる：

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に以下で

@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を調整するにはどうすればよいですか？

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"も設定して、サンプル内の効果を確認し、<span>の代わりに<div>を使用しました。