html - 如何在表格中控制表格的宽度

Question

这是页面源码

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

我正在使用 Bootstrap ，下面是我的页面图片。我的问题是:如何在 Collection Info 的 div 中包含 Vendor, Claim Amount, Amount Received, Type？

所以我使用两个循环来渲染这个页面第一个循环生成 - vendor, claim amount, amount received, type第二个循环生成 - date,rep,notes

我的页面乱七八糟的原因是我的 textarea

这是我的 html 页面:

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

我正在努力实现这样的目标:

Answer 1

[此解决方案考虑了编辑生成的代码]

正如我在评论中告诉你的，只需修复不同的 colspan在表格中，它看起来已经好多了(并且更接近您在图片中显示的内容):http://jsfiddle.net/wnqLpsv9/

例如，如果行有 7 列，则使所有行都为 7 列(或使用 colspan 占用 7 列的空间)，否则结果将取决于浏览器决定如何显示表格。

---

不过，您需要查看源代码，因为这是一堆不必要的 <tr>和关闭 </td>不开<td> ，不会生成有效代码:

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

根据您在图片中显示的内容，这一行中需要更多内容(并注意我不认为这是正确的，但更多的是关于如何修复的指南它):

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