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，下面是我的页面的图片。我的问题是：如何在Vendor, Claim Amount, Amount Received, Type收藏信息中加div？

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

以及我的网页混乱的原因是由于textarea

enter image description here 这是我的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>

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

enter image description here

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

如何使用表控制表的宽度

1 个答案: