如何在Blazor Server应用中渲染带rowspan的父子层级HTML表格

问题根因 #

Blazor的Razor模板引擎采用结构化的标签解析逻辑，原有代码中通过@:输出不闭合的</tr><tr>打断标签配对的写法，会被引擎自动补全冗余标签，最终导致表格DOM结构不符合预期。

解决方案 #

调整循环逻辑，让每一条股份数据对应一个完整的<tr>标签，仅在处理同一币种下第一条股份数据时，输出带rowspan属性的序号、货币列，后续同币种的股份数据不再输出这两列即可，完全符合原生HTML表格的合并规范，也能被Blazor正常解析。

修正后的代码如下：

@if (TestModel == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table table-sm table-responsive table-condensed caption-top">
     <thead>
      <tr>
       <th scope="col">S/No</th>
       <th scope="col">Currency</th>
       <th scope="col">Class of share</th>
       <th scope="col">No.of Shares Held</th>
       <th scope="col">Amount of Issued Share Capital</th>
       <th scope="col">Amount of Paid Up Share Capital</th> 
      </tr>
     </thead>
     <tbody>
        @{ int sno = 1; }
        @foreach (var shareCapital in TestModel.ShareCapitalDetails)
        {
            var shareCount = shareCapital.Shares.Count;
            for(int i = 0; i < shareCount; i++)
            {
                var share = shareCapital.Shares[i];
                <tr>
                    @if(i == 0)
                    {
                        <td rowspan="@shareCount">@sno</td>
                        <td rowspan="@shareCount">@shareCapital.Currency</td>
                    }
                    <td>@share.ClassOfShare</td>        
                    <td>@share.SharesHeld</td>      
                    <td>@share.AmountOfIssuedShareCapital</td>      
                    <td>@share.AmountOfPaidUpShareCapital</td>  
                </tr>
            }
            sno++;
        } 
     </tbody>
    </table>
}

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