How to control the width of a table with-in table - html

Question

Here is the page source
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
<tr>
<td>
Difference in State Check
</td>
<td>
0.00
</td>
<td>
-382.19
</td>
<td>
<select class="form-control" data-val="true" data-val-required="The Value field is required." id="item_Type_Value" name="item.Type.Value">
<option selected="selected" value="c6edd5bc-c5ef-4a56-8db2-17905d98c823">--None--</option>
<option value="0b4a44d0-7241-422d-935b-d0606b9c5ce1">Attn</option>
<option value="a1341e3c-afb7-4c47-8040-d33bdf82493b">$$$</option>
</select>
<p />
<div class="col-xs-12" style="text-align: right;">
<div class="form-group">
<label class="col-xs-5 control-label"></label>
<div class="col-xs-7">
<input type="submit" value=" Update " style="height:35px;width:75px;" />
</div>
</div>
</div>
</td>
<td>
0.00
</td>
<td>
</td>
<td>
999-999-9999
</td>
</tr>
<tr>
<td>
<textarea cols="80" htmlAttributes="{ class = form-control }" id="Notes" name="Notes" rows="6">
</textarea>
</td>
</tr>
</table>
I'm using bootstrap and below is the picture of my page.
My question is: How can I have Vendor, Claim Amount, Amount Received, Type with-in the div of Collection Info?
so I'm rendering this page using two loops
the first loop generates - vendor, claim amount, amount received, type
the second loop generates - date,rep,notes
and the reason my page is messed up is due to my textarea
here is my html page looks like:
<div class="col-xs-12">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
Collection Info
</div>
<br />
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<table class="table" >
<tr>
<th>Vendor</th>
<th>Claim Amount</th>
<th>Amount Received</th>
<th>Type</th>
</tr>
<tr>
<th>Date</th>
<th>Rep</th>
<th>Notes</th>
</tr>
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
</table>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve something like this:

Answer 1

[This solution takes into consideration the generated code from the edit]
As I told you in the comment, just by fixing the different colspan in the table, it already looks a lot better (and closer to what you show in your picture): http://jsfiddle.net/wnqLpsv9/
For example, if the rows have 7 columns, make all the rows have 7 columns (or occupy the space of 7 columns using colspan), or the result will depend on how the browser decides to display the table.
Still, you need to look at the source, because this is a mess of unnecessary <tr> and closing </td> without opening <td>, that won't generate valid code:
#foreach (var item in Model)
{
<tr><td>#item.vendor</td></tr>
<tr>#item.claimamount</td></tr>
<tr>#item.amountreceived</td></tr>
<tr>#item.type</td></tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td>
#item1.Notes
</td>
</tr>
}
<tr>
<td>
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}
From what you show in the picture, it would need to be something more in this line (and notice that I don't claim this is correct, but more of a guideline on how to fix it):
#foreach (var item in Model)
{
<tr>
<td>#item.vendor</td>
<td>#item.claimamount</td>
<td>#item.amountreceived</td>
<td>#item.type</td>
</tr>
foreach (var item1 in item.DetailViewModel)
{
<tr>
<td>
#item1.Date
</td>
<td>
#item1.Rep
</td>
<td colspan="2">
#item1.Notes
</td>
</tr>
}
<tr>
<td colspan="2"></td>
<td colspan="2">
#Html.TextArea("Notes", "", 6, 80)
</td>
</tr>
}