SETTING A TABLE WITH HEADING AND SUBHEADING INSIDE THE PANEL DESIGN IN RAZOR VIEW:MVC DOTNET

Note:Replace the class with your own bootstrap and css.

<div class="panel panel-default" style="border-color:#a8ddeb;width:100%;float:left">
<div class="panel-heading" style="background-color:#dbedf2"><b></b></div>
<div class="panel-body" style="font-family:Verdana;font-size:11px">
<table style="border:1px solid; border-collapse: separate; border-spacing:0px;width:100%">
<thead>
<tr class="prd_td">
<th colspan=3 style="text-align: center; border:
 thin solid; width: 50%”>Parts Used for Repair / Service (or) Parts Required to Order</th>


<th colspan=2 style="text-align: center; border: thin solid; width: 30%">Parts Status</th>
<td rowspan="2" style="text-align: center; border: thin solid; width: 20%">Remarks</td>
</tr>
</thead>
<tbody>
<tr class="prd_td">
<th style="text-align: center; border: thin solid; width: 10%">Part No</th>
<th style="text-align: center; border: thin solid; width: 10%">Quantity</th>
<th style="text-align: center; border: thin solid; width: 30%">Description</th>
<th style="text-align: center; border:thin solid; width: 15%">Used</th>
<th style="text-align: center; border: thin solid; width: 15%">Required</th>
<td style="text-align: center; border: thin solid; width: 15%">&nbsp;</td></tr>
<tr class="prd_td" style="text-align: center;">
<td>
@Html.TextBoxFor(model => model.Part_No, new { Style = "width:115px;padding:0px" })
</td>
<td>
@Html.TextBoxFor(model => model.QTY, new { Style = "width:115px;padding:0px" })
</td>
<td>
@Html.TextBoxFor(model => model.Descripsion, new { Style = "width:345px;padding:0px" })
</td>
<td>
@Html.TextBoxFor(model => model.used, new { Style = "width:168px;padding:0px" })
</td>
<td>
@Html.TextBoxFor(model => model.required, new { Style = "width:160px;padding:0px" })
</td>
<td>
@Html.TextBoxFor(model => model.Remarks, new { Style = "width:230px;padding:0px" })
</td>
</tr>
</table>
<br />
</div>
</div>

 

OUTPUT:

Leave a Reply

Your email address will not be published. Required fields are marked *