CODEWITHSUNDEEP
htmlcsshtml-table
Beginner
Beginner

Reputation: 29583

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>
               @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..?

Upvotes: 0

Views: 632

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039588

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.

Upvotes: 0

davecoulter
davecoulter

Reputation: 1826

Just a shot in the dark, but it seems you have an extra <th></th> in your header section? Is that on purpose?

Upvotes: 1

Related Questions