Question

I have an table and needed Ajax form for each row so this is new implementation:

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

_PhoneRow Partial View:

@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>

As you see I must put form inside of <td> actually the first implementation was:

            <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>

But now all of this <td>s covered in the new table and <td> so with new implementation elements in table are some disordered and I try to fix it with some css:

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

But yet there is some horizontal disorders, This is First Implementation Without Table inside <td>:

And this is second one with table inside <td>

So what is your suggestion to fix the second one like first one ?

Answer 1

The easiest way to fix is, is to give three of the four <td> elements a fixed width. Since the table is 100% wide, the fourth cell will take up the rest of the available width.

<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; }

If this isn’t working as it should, you can just give the four <td> elements the same fixed with as the header cells of the outer table.