不能缩进th＆amp;表中的td元素

Question

我正在尝试缩进上述主题元素，因为它们是整个表的子行。

我不能使用两个单独的表，因为我的cshtml razor代码中的定义等同于表模型中的特定子数据。

有人可以告诉我如何使用“TimeTrackingID”元素和它下面的'id'值td元素执行缩进，它看起来属于它上面的父行吗？

这是我的CSHTML代码

@model IEnumerable<YeagerTechDB.Models.Project>

@{
    ViewBag.Title = "Projects";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Projects with associated TimeTrackings</h2>

<table class="table table-condensed">
    <tr>
        <th align="right">
            @Html.DisplayNameFor(model => model.ProjectID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th align="right">
            @Html.DisplayNameFor(model => model.Quote)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CreatedDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.UpdatedDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Customer.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Customer.Company)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Category.CategoryDescription)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Priority.PriorityDescription)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status.StatusDescription)
        </th>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td align="right">
                    @Html.DisplayFor(modelItem => item.ProjectID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td align="right">
                    @Html.DisplayFor(modelItem => item.Quote)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreatedDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UpdatedDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Customer.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Customer.Company)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Category.CategoryDescription)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Priority.PriorityDescription)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Status.StatusDescription)
                </td>
                <td>
                    <a href="@Url.Action("Create", "ProjectTimeTrackings", new { area = "Projects", id= item.ProjectID, name = item.Name })"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>Create TimeTracking</a>
                </td>
            </tr>
            if (item.TimeTrackings.Count > 0)
            {
                <tr style="margin-left:1em">
                    <th align="right" style="padding:3px">TimeTrackingID</th>
                    <th align="center" style=" padding:3px">StartDate</th>
                    <th align="center" style=" padding:3px">EndDate</th>
                </tr>
                foreach (var projTimeItem in item.TimeTrackings)
                {
                    <tr>
                        <td align="right" style="padding:3px">
                            @Html.DisplayFor(m => projTimeItem.TimeTrackingID)
                        </td>
                        <td style="padding:3px">
                            @Html.DisplayFor(m => projTimeItem.StartDate)
                        </td>
                        <td style="padding:3px">
                            @Html.DisplayFor(m => projTimeItem.EndDate)
                        </td>
                        <td style="padding:3px">
                            <a href="@Url.Action("Details", "ProjectTimeTrackings", new { area = "Projects", id = item.ProjectID })"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>Details</a>
                        </td>
                    </tr>
                }
            }
        }
    </tbody>
</table>

下面是我的表格图片。 请使用您喜欢的图像查看器在此处复制图像并将其粘贴到查看器中以获得更好的图像。

Answer 1

尝试将主表的宽度和高度设置为100％ - 这将对齐一行中的所有列。 所有列的宽度均为8％（100/14 -14为总列数）。

将th和td的填充设置为0px，将边距设置为0px。

将所有列的自动换行属性设置为true。