ASP.NET Core 6中表格表头与列错位，所有表头均位于第一列上方

问题现象 #

使用ASP.NET Core 6、jQuery和Bootstrap 4开发的应用中，部分表格出现表头与列错位，所有表头集中在第一列上方，截图如下：

对应的问题代码：

<table class="table table-bordered table-striped table-hover col-md-12">
    <thead>
        <tr>
            @if ((string)ViewData["Designation"] == "Current")
            {
                <td class="text-center">Registered (NOT designated)</td>
            }
            <td class="text-center">Designation Date</td>
            <td class="text-center">CoP/CoD Document</td>
            <td class="text-center">NSS Finance Customer Code</td>

            @if ((string)ViewData["Designation"] == "Current")
            {
                <td class="text-center">Next Designation Date</td>
                <td class="text-center">First Reminder Sent</td>
                <td class="text-center">Second Reminder Sent</td>
                <td class="text-center">De-designation Notice Sent</td>
            }
    
            <td></td>
        </tr>
    </thead>
    <tbody>
            @if ((string)ViewData["Designation"] == "All" && Model.RenewalDesignations.Any())
            {
                foreach (var designation in Model.RenewalDesignations)
                {
                    <tr>
                        <td class="text-center">@(designation.DesignatedAt.ToString("dd/MM/yyyy"))</td>
                        <td>
                            @if (designation.CoDorCoPDocument != null)
                            {
                                <a asp-controller="Designation" method="get" asp-action="DownloadCoPorCoD" asp-route-id="@designation.Id" class="btn btn-block btn-outline-info">
                                    Download
                                </a>
                            }
                        </td>
                        <td class="text-center">@designation.NssFinanceCustomerCode</td>
                        <td>
                            @if (User.IsInRole("PHSStaff"))
                            {
                                <a asp-controller="Designation" method="get" asp-action="EditDesignation" asp-route-id="@designation.Id" class="btn btn-info btn-block">
                                    Edit
                                </a>
                            }
                        </td>
                    </tr>
                }
            }
    
            @if ((string)ViewData["Designation"] == "All" && !Model.RenewalDesignations.Any())
            {
                <tr>
                    <td colspan="6">
                        No previous designation records
                    </td>
                </tr>
            }
        @if ((string)ViewData["Designation"] == "Current" && (Model.CurrentDesignation != null && !Model.CurrentDesignation.DesignationPending))
 {
         <tr>
             <td class="text-center">
                 @Model.RegisteredNotDesignatedAt.Date.ToString("dd/MM/yyyy")
             </td>
             <td class="text-center">
                 @Model.CurrentDesignation.DesignatedAt.ToString("dd/MM/yyyy")
             </td>
             <td>
                 @if (Model.CurrentDesignation.CoDorCoPDocument != null)
                 {
                     <a asp-controller="Designation" method="get" asp-action="DownloadCoPorCoD" asp-route-id="@Model.CurrentDesignation.Id" class="btn btn-block btn-outline-info">
                         Download
                     </a>
                 }
                 else if (Model.CurrentDesignation.ConditionsOfDesignationId > 0)
                 {
                     <a class="btn btn-primary btn-block" asp-action="ViewCoD" asp-controller="ConditionsOfDesignation" asp-route-id="@Model.CurrentDesignation.ConditionsOfDesignationId" title="Click to open conditions of designation">
                         Conditions of Designation
                     </a>
                 }
             </td>
             <td class="text-center">@Model.CurrentDesignation.NssFinanceCustomerCode</td>
             <td class="text-center">@Html.Raw(Model.CurrentDesignation.NextDesignationDate().Date > Model.CurrentDesignation.DesignatedAt.Date ? Model.CurrentDesignation.NextDesignationDate().ToString("dd/MM/yyyy") : "")</td>
             <td class="text-center">@Html.Raw(Model.CurrentDesignation.FirstRenewalReminderSent ? "Yes" : "No")</td>
             <td class="text-center">@Html.Raw(Model.CurrentDesignation.SecondRenewalReminderSent ? "Yes" : "No")</td>
             <td class="text-center">@Html.Raw(Model.CurrentDesignation.DesignationLapsedSent ? "Yes" : "No")</td>
             <td>
             @if (User.IsInRole("PHSStaff"))
             {
                 <a asp-controller="Designation" method="get" asp-action="Designation" asp-route-id="@Model.VaccinationCentreId" class="btn btn-info btn-block">
                     Edit
                 </a>
             }
             </td>
         </tr>
  }
        </tbody>
    </table>

问题根源 #

1. 表格错误应用栅格类：直接给<table>添加col-md-12，Bootstrap的col-*类是为栅格容器子元素设计的，会干扰表格默认布局逻辑。
2. 表头标签使用错误：表头用<td>而非<th>，Bootstrap表格依赖<th>维持列对齐和默认样式。
3. 列数不匹配：
   • All模式无数据时，colspan="6"与表头实际4列不符，导致布局错乱。
   • 表头末尾空<td>无意义，额外占用列数破坏结构。

修复步骤 #

1. 调整栅格类位置：移除表格上的col-md-12，将表格包裹在栅格容器内：

<div class="col-md-12">
  <table class="table table-bordered table-striped table-hover">
    <!-- 表格内容 -->
  </table>
</div>

2. 替换表头标签：将所有表头<td>改为<th>，并移除无意义空<td>，按模式匹配列数：

<thead>
  <tr>
      @if ((string)ViewData["Designation"] == "Current")
      {
          <th class="text-center">Registered (NOT designated)</th>
      }
      <th class="text-center">Designation Date</th>
      <th class="text-center">CoP/CoD Document</th>
      <th class="text-center">NSS Finance Customer Code</th>

      @if ((string)ViewData["Designation"] == "Current")
      {
          <th class="text-center">Next Designation Date</th>
          <th class="text-center">First Reminder Sent</th>
          <th class="text-center">Second Reminder Sent</th>
          <th class="text-center">De-designation Notice Sent</th>
      }

      <th class="text-center">操作</th> <!-- 替换空td为明确表头文本 -->
  </tr>
</thead>

3. 修正colspan值：All模式无数据时，将colspan="6"改为colspan="4"，与表头列数一致：

<td colspan="4">
    No previous designation records
</td>

4. 校验列数一致性：
   • Current模式：表头9列，tbody对应行9个<td>，结构匹配。
   • All模式：表头4列，tbody对应行4个<td>，结构匹配。

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