0

我有一个表格，每一行都需要 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>

在此处输入图像描述

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

4

1 回答 1

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>元素与外部表格的标题单元格相同。

于 2012-07-08T05:16:13.120 回答