Aligning columns in MVC4 Index.cshtml

Question

This is a web application MVC4 with EF6 with Code First Migration.

I'm having issues with the alignment of my columns. I added arrows to show where I want each of the titles to be. What code do I need to add in to make them align properly?

Views\\Users\\Create.cshtml

@using PagedList;
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
@model IPagedList<RecreationalServicesTicketingSystem.Models.User>

@{
    ViewBag.Title = "Users";
}

<h2>Users</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("Index", "Users", FormMethod.Get))
{
    <p>
        Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search" />
    </p>
}

<table>
    <tr>
        <th>
            First Name
        </th>
        <th>
            @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm })
        </th>
        <th>
            @Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm })
        </th>
        <th></th>

        <th>
            Department ID
        </th>
        <th>
            Depot ID
        </th>
        <th>
            Is Administrator

        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstMidName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EnrollmentDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Department.DepartmentName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Depot.DepotName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.IsAdministrator)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.UserID }) |
            @Html.ActionLink("Details", "Details", new { id=item.UserID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.UserID })
        </td>
    </tr>
}

</table>
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

Answer 1

It looks like you have an empty

<th></th> 

tag in the middle of your header row. You probably want to move that to the end of the header row where the CRUD links are.

 <tr>
    <th>
        First Name
    </th>
    <th>
        @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm })
    </th>
    <th>
        @Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm })
    </th>
    <th>
        Department ID
    </th>
    <th>
        Depot ID
    </th>
    <th>
        Is Administrator
    </th>
    <th></th>
</tr>

Answer 2

You need to use the thead and tbody tags:

 <table>
         <thead>
             <tr>
                 <th>/* Your column names*/ </th>
                 /* ... */
             </tr>
         </thead>
         <tbody>
             /*... */
         </tbody>
    </table>