在MVC4 Index.cshtml中对齐列

Question

这是带有EF6且具有代码优先迁移功能的Web应用程序MVC4。

我在列对齐方面遇到问题。 我添加了箭头以显示每个标题的位置。 我需要添加什么代码以使其正确对齐？

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

好像你有空

<th></th> 

标签在标题行的中间。 您可能希望将其移动到CRUD链接所在的标题行的末尾。

 <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

您需要使用thead和tbody标签：

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