Question

这是一个带有EF6的代码优先迁移的Web应用程序MVC4。

我的列对齐问题。我添加了箭头来显示我希望每个标题的位置。我需要添加什么代码才能使它们正确对齐？

视图\用户\ 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>

在MVC4 Index.cshtml中对齐列

2 个答案: