I have the below table definition in my MVC 3 main view.
<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>
I'm adding rows dynamically to the above table but each row that i add is being generated from a partial view.
Below is my partial view definition
@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>
The table lay out is coming correctly in IE 8 & above but in chrome and Firefox the Row columns are not properly aligned with the table column headers.
How can i render my partial view as a valid table row in my main view's </tbody> </tbody>
element
Below is the screenshot of how my table is appearing in IE (correct layout)
And below is the incorrect lay out in chrome
Probably display: inline;
on headers is causing this kind of effect.
Normally table cells have display:table-cell;
.
Your table headers should look something like:
<th style="white-space: nowrap;width: 120px; text-align: left ">
Unit
</th>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.