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

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