Dynamically generated HTML table - how to constrain width
I am creating a dynamic table using MVC3.
However the table goes off the page in the layout and doesn't reside inside the shared 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>
开发者_JAVA技巧 @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>
}
This is the table and it renders inside the shared layotu @renderbody. But the table does not stay within the div..?
Just a shot in the dark, but it seems you have an extra <th></th>
in your header section? Is that on purpose?
You could apply a overflow: scroll;
style on the main section in _Layout
:
<section id="main" style="overflow:scroll;">
@RenderBody()
</section>
This way if the width of your table is bigger than what can fit on the main section scroll bars will appear.
精彩评论