Как использовать частичный вид для добавления строк в таблицу, определенную в основном представлении

Question

У меня есть определение нижней таблицы в главном представлении MVC 3.

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

В таблице раскладывать правильно приходит в IE 8 & выше, но в хром и Firefox столбцов Row не выровнены с заголовками столбцов таблицы.

Как я могу вынести мой частичный вид в качестве действительной строки таблицы в моем основном зрении в </tbody> </tbody> элемента

Ниже приведен скриншот того, как моя таблица появляется в IE (правильное расположение)

И ниже некорректное выложите в хроме

Answer 1

Возможно, display: inline; на заголовках вызывает такой эффект.

Обычно ячейки таблицы имеют display:table-cell;.

Ваши таблицы заголовки должны выглядеть примерно так:

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