Html 如何使用局部视图向主视图中定义的表添加行

我的MVC3主视图中有下表定义

 <table id="myDynamicTable" class="myClass" >
            <thead>
                <tr id="uploadrow_0">
                    <th style="white-space: nowrap;display: inline;width: 5px; text-align: left " >
                        Number
                    </th>
                    <th style="white-space: nowrap;display: inline;width: 120px; text-align: left ">
                        Unit
                    </th>
                    <th style="white-space: nowrap;display: inline;text-align: left ">
                        Type
                    </th>
                    <th  style="white-space: nowrap;display: inline;width: 90px; text-align: left ">
                        Date
                    </th>
                    <th style="white-space: nowrap;display: inline;width: 351px; text-align: left ">
                        Action
                    </th>
                    <th style="white-space: nowrap;display: inline;width: 300px; text-align: left ">
                        Comment
                    </th>
                </tr>
            </thead>
            <tbody>
                          @if (Model.ProductDetails.Count > 0)
                          {
                              foreach (var item in Model.ProductDetails)
                              {
                                  @Html.Partial("ProductDetailsPartial", item);
                              }
                          }
                          else
                          {
                              ProductDetailsViewModel item = new ProductDetailsViewModel();
                              item.Types = ViewBag.TypeList;
                              item.Unit = ViewBag.UnitList;
                              item.Number = 1;
                              @Html.Partial("ProductDetailsPartial", item);
                          }

            </tbody>
        </table>

数
单位
类型
日期
行动
评论
@如果（Model.ProductDetails.Count>0）
{
foreach（Model.ProductDetails中的var项）
{
@Html.Partial（“productdetailsparial”，item）；
}
}
其他的
{
ProductDetailsViewModel项=新ProductDetailsViewModel（）；
item.Types=ViewBag.TypeList；
item.Unit=ViewBag.UnitList；
项目编号=1；
@Html.Partial（“productdetailsparial”，item）；
}

我正在向上表动态添加行，但添加的每一行都是从局部视图生成的

下面是我的局部视图定义

    @model ProductDetailsViewModel
        <tr>
        @using (Html.BeginCollectionItem("item"))
        {
            <td class="autoGenNumber" style="width: 5px" >
                @if (Model == null)
                {
                    ProductDetailsViewModel item = new ProductDetailsViewModel();
                    item.Types = ViewBag.TypeList;
                    item.Unit = ViewBag.UnitList;
                    item.Number = 1;
                   @Html.LabelFor(x => Model.Number, Model.Number.ToString(), new { style = "width: 10px;", @class = "autoGenNumber" })
                }  
            </td>
            <td class="tdUnit">
                @Html.TextBox("Unit", Model.Unit, new { id = "Unit", style = "width:120px; padding: 0px;", @class = "txtUnit" })    
            </td>
            <td class="tdBorder">
                @Html.DropDownListFor(model => model.TypeId, new SelectList(Model.Types, "Value", "Text", Model.TypeId), "[--Select--]", new { @id = "ddlType", style = "width:20px; padding: 0px;", @class = "ddlType" })
            </td>
            <td class="tdBorder">
                @if (Model.Date.ToShortDateString().Contains("1/1/0001"))
                {
                    <input type="text" name="Model.Date" value="@DateTime.Today.ToShortDateString()"  class="txtDate" readonly = "readonly" style = "width: 90px; padding: 0px;" />
                }
                else
                {
                    <input type="text" name="Model.Date" value="@Model.Date.ToShortDateString()"  class="txtDate" readonly = "readonly" style = "width: 90px; padding: 0px;" />
                }
            </td>
            <td class="tdBorder">
              @Html.DropDownListFor(model => model.UnitId, new SelectList(Model.Unit, "Value", "Text", Model.UnitId), "[--Select--]", new { @id = "ddlUnit", style = "width:351px;", @class = "ddlUnit" })
            </td>
            <td class="tdBorder">
                @Html.TextBoxFor(x => Model.comment, new { id = "Comment", @class = "Comment RestrictCharacters", style = "width:300px;" })
            </td>
        } 
 </tr>

@model-ProductDetailsViewModel
@使用（Html.BeginCollectionItem（“item”））
{
@if（Model==null）
{
ProductDetailsViewModel项=新ProductDetailsViewModel（）；
item.Types=ViewBag.TypeList；
item.Unit=ViewBag.UnitList；
项目编号=1；
@LabelFor（x=>Model.Number，Model.Number.ToString（），新的{style=“width:10px；”，@class=“autoGenNumber”}）
}  
@TextBox（“Unit”，Model.Unit，新的{id=“Unit”，style=“width:120px；padding:0px；”，@class=“txtnit”}）
@Html.DropDownListFor（model=>model.TypeId，新建选择列表（model.Types，“Value”，“Text”，model.TypeId），“[--Select--]”，新建{@id=“ddlType”，style=“width:20px；padding:0px；”，@class=“ddlType”}）
@如果（Model.Date.ToShortDateString（）包含（“1/1/0001”））
{
}
其他的
{
}
@Html.DropDownListFor（model=>model.UnitId，新建选择列表（model.Unit，“Value”，“Text”，model.UnitId），“[--Select--]”，新建{@id=“ddlUnit”，style=“width:351px；”，@class=“ddlUnit”}）
@TextBoxFor（x=>Model.comment，新的{id=“comment”，@class=“comment RestrictCharacters”，style=“width:300px；”）
} 

IE 8及以上版本中的表格布局正确，但在chrome和Firefox中，行列未与表格列标题正确对齐

如何在主视图的

元素中将局部视图呈现为有效的表行

下面是我的表格在IE中显示的屏幕截图（正确布局）

下面是不正确的镀铬布局

---

可能

显示：内联会导致这种效果

通常表格单元格有
显示：表格单元格

您的表标题应类似于：

<th style="white-space: nowrap;width: 120px; text-align: left ">
   Unit
</th>


单位
尝试将第一个文本框中的样式更改为
style=“width:120px；padding:0px；框大小：border-box；”
并查看是否会产生差异（或者将宽度减小为
width:100px
）提供css。你有td课程。@StephenMuecke还是没什么区别。你救了我一天。按照建议将内联替换为表单元格解决了此问题。