TD中表的良好格式

Question

我有一个表，每行都需要Ajax表单，所以这是新的实现：

<tbody id="AllPhones">
@foreach(var item in Model.Phones) {
<tr class="gradeA odd" id="TR@(item.Id)">
    @{Html.RenderPartial("_PhoneRow", item);}
</tr>
}

_PhoneRow部分观点：

@model MyModel
<td class="TableIncluded" colspan="4">
@using(Ajax.BeginForm("EditPhone","Phone", new { id = Model.Id }, new AjaxOptions {
UpdateTargetId = "TR" + Model.Id, 
OnComplete = "CompleteEditPhone"
})) {
<table class="Internal">
    <thead></thead>
    <tbody>
        <tr>
            <td>@Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
            <td>@Html.DisplayFor(modelItem => Model.PhoneKind)</td>
            <td>@if(Model.IsDefault) {<span class="BoolRadio True">Default</span>} else { <span></span>}</td>
            <td><input type="submit" value="Edit" class="CallEditPhone" id = "Edit@(Model.Id)" /></td>
        </tr>
    </tbody>
</table>
}
</td>

如您所见，我必须将表单放在<td>内，实际上第一个实现是：

            <td>@Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
            <td>@Html.DisplayFor(modelItem => Model.PhoneKind)</td>
            <td>@if(Model.IsDefault) {<span class="BoolRadio True">Default</span>} else { <span></span>}</td>
            <td><input type="submit" value="Edit" class="CallEditPhone" id = "Edit@(Model.Id)" /></td>

但是现在所有这些<td>覆盖在新表和<td>中，所以表中的新实现元素有些混乱，我尝试用一​​些css修复它：

td.TableIncluded, td.TableIncluded table, td.TableIncluded form {
font-size: inherit;
margin: inherit;
height: inherit;
padding: inherit;
}
td.TableIncluded {
width: 100%;
}

但是存在一些横向障碍，这是<td>内的第一次无桌面实施：

这是第二个表格<td>

那你有什么建议像第一个那样修复第二个？

Answer 1

最简单的修复方法是将四个<td>元素中的三个赋予固定宽度。由于表格是100％宽，第四个单元格将占用可用宽度的其余部分。

<table class="Internal">
    <thead></thead>
    <tbody>
        <tr>
            <td>@Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
            <td class="phonekind">@Html.DisplayFor(modelItem => Model.PhoneKind)</td>
            <td class="phonedefault">@if(Model.IsDefault) {<span class="BoolRadio True">Default</span>} else { <span></span>}</td>
            <td class="phoneedit"><input type="submit" value="Edit" class="CallEditPhone" id = "Edit@(Model.Id)" /></td>
        </tr>
    </tbody>
</table>

table.Internal { width: 100%; }
table.Internal td.phonekind { width: 90px; }
table.Internal td.phonedefault{ width: 90px; }
table.Internal td.phoneedit{ width: 90px; }

如果这不能正常工作，你可以将四个<td>元素与外表的标题单元格固定相同。