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>です:

ここに画像の説明を入力

そして、これは中にテーブルがある2番目のものです<td>

ここに画像の説明を入力

それで、最初のもののように2番目のものを修正するためのあなたの提案は何ですか?

4

1 に答える 1

1

<td>修正する最も簡単な方法は、4 つの要素のうち 3 つに固定幅を与えることです。表の幅は 100% であるため、4 番目のセルが残りの使用可能な幅を占有します。

<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>、外側のテーブルのヘッダー セルと同じように 4 つの要素を固定することができます。

于 2012-07-08T05:16:13.120 に答える