動的に生成されたHTMLテーブル - 幅を制限する方法

Question

MVC3を使用して動的テーブルを作成しています。

しかし、テーブルはレイアウト内のページから外れ、共有div内には存在しませんか？

@{ 
    ViewBag.Title = "Users"; 
} 

<h2>Users</h2> 

<p> 
    @Html.ActionLink("Create New User", "Create") 
</p> 


    <table> 
     <tr> 
      <th> 
       UserID 
      </th> 
      <th> 
       UserName 
      </th> 
      <th> 
       UserForename 
      </th> 
      <th> 
       PW 
      </th> 
      <th> 
       UserTypeID 
      </th> 
      <th> 
       PasswordMustBeChanged 
      </th> 
      <th></th> 
     </tr> 

    @foreach (var item in Model) { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.U1_UserId) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.U1_UserName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.U1_UserForename) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.U1_PW) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.U1_UserTypeID) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.U1_PasswordMustBeChanged) 
      </td> 
      <td> 
       @Html.ActionLink("Edit", "Edit", new { id=item.U1_UserId }) | 
       @Html.ActionLink("Delete", "Delete", new { id=item.U1_UserId }) 
      </td>  
     </tr> 
    } 

これはテーブルであり、共有されたlayotu @renderbody内でレンダリングされます。しかし、テーブルは部門内にとどまっていません..？

Answer 1

あなたは_Layoutのメインセクションにoverflow: scroll;スタイルを適用することができます：あなたのテーブルの幅は、スクロールバーが表示されますメインセクションに収まることができるものよりも大きい場合

<section id="main" style="overflow:scroll;"> 
    @RenderBody() 
</section> 

この方法です。

Answer 2

ちょうど暗闇の中で撮影しましたが、ヘッダーセクションに余分な<th></th>がありますか？それは目的ですか？