A Good Format for a Table in TD - asp.net-mvc

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.