ASP.NET MVC采购订单视图：局部视图加载表格行对齐异常问题

核心问题定位 #

你在<tbody>里嵌套<ul id='PoItmList'>渲染表格行的方式，违反了HTML表格的标准结构——<tbody>的直接子元素必须是<tr>，插入<ul>会打乱浏览器对表格列宽的计算逻辑，导致新加载的行和表头无法对齐。

具体修复步骤 #

1. 修正主视图的表格结构 #

把<tbody>内的<ul>容器直接替换成<tbody>本身作为目标容器，原有循环直接在<tbody>内输出<tr>：

<table>
  <thead>
    <!-- 你的表头列示例 -->
    <tr>
      <th>商品编码</th>
      <th>商品名称</th>
      <th>采购数量</th>
      <th>单价</th>
      <th>操作</th>
    </tr>
  </thead>
  <!-- 直接用tbody作为行容器 -->
  <tbody id='PoItmList'>
    <!-- 原有局部视图循环直接输出<tr>，不再套<ul> -->
    @foreach (var item in Model.PurchaseItems)
    {
      Html.RenderPartial("_ItemList", item);
    }
  </tbody>
</table>

2. 调整局部视图_ItemList.cshtml #

确保局部视图只输出纯<tr>元素，不包含任何<li>或其他多余容器：

<tr>
  <td><input type="text" name="PurchaseItems[__index__].ProductCode" /></td>
  <td><input type="text" name="PurchaseItems[__index__].ProductName" /></td>
  <td><input type="number" name="PurchaseItems[__index__].Qty" /></td>
  <td><input type="number" name="PurchaseItems[__index__].UnitPrice" /></td>
  <td><button class="del-item-btn">删除</button></td>
</tr>

注：如果需要处理模型绑定的索引问题，可使用ASP.NET MVC的BeginCollectionItem辅助类生成唯一索引，避免提交时索引冲突。

3. 修改AJAX追加逻辑 #

AJAX请求返回的局部视图是纯<tr>，直接追加到<tbody>即可，无需处理<ul>相关逻辑：

$('.add-item-btn').click(function() {
  $.ajax({
    url: '/PurchaseOrders/AddPoItems',
    type: 'GET',
    success: function(html) {
      // 直接将返回的<tr>追加到tbody
      $('#PoItmList').append(html);
      // 重新绑定删除按钮事件（避免动态加载的元素无法触发）
      $('.del-item-btn').off('click').on('click', function() {
        $(this).closest('tr').remove();
      });
    }
  });
});

4. 统一表格列样式（可选） #

为了确保列宽完全一致，可给<th>和<td>设置统一的宽度或百分比：

table th, table td {
  width: 20%; /* 按列数分配，比如5列各占20% */
  padding: 8px;
  box-sizing: border-box;
}

额外注意事项 #

• 严格遵循HTML表格结构规范：<thead>/<tbody>/<tfoot>的直接子元素只能是<tr>，不要插入其他容器元素。
• 若原有代码用<ul>是为了循环渲染，直接在<tbody>内循环输出<tr>即可，ASP.NET MVC的RenderPartial可以直接生成合法的表格行元素。

内容的提问来源于stack exchange，提问作者Dev Beginner