BlazorContextMenu中td标签colspan属性失效问题求助

我在开发Blazor项目时，使用BlazorContextMenu组件的ContextMenuTrigger包裹thead标签，尝试添加一行作为组标题并给单元格设置colspan="3"（与表格列数一致），但该属性未生效。

现有代码 #

表头部分

<ContextMenuTrigger WrapperTag="thead" CssClass="my-class">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</ContextMenuTrigger> 

目标跨列行

<tr class="title-row">
    <td colspan="3">
        <h2>
            Name of the row
        </h2>
    </td>
</tr>

问题原因 #

1. ContextMenuTrigger使用WrapperTag="thead"时，可能会对内部DOM结构进行额外处理，破坏表格的语义化结构，导致浏览器无法正确识别colspan属性。
2. 表头区域内的单元格应使用th标签而非td，不符合规范的标签也可能导致属性失效。

解决方案 #

方案一：调整标签类型并统一包裹在thead内

将跨列行的td替换为th，并将其与原表头行一起放在ContextMenuTrigger包裹的thead内，保证表格结构规范：

<ContextMenuTrigger WrapperTag="thead" CssClass="my-class">
    <tr class="title-row">
        <th colspan="3">
            <h2>Name of the row</h2>
        </th>
    </tr>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</ContextMenuTrigger>

方案二：调整ContextMenuTrigger的包裹范围

避免用ContextMenuTrigger直接包裹整个thead，而是将其放在thead内部，仅包裹需要触发右键菜单的元素，确保表格DOM结构不受组件干扰：

<thead class="my-class">
    <ContextMenuTrigger>
        <tr class="title-row">
            <th colspan="3">
                <h2>Name of the row</h2>
            </th>
        </tr>
    </ContextMenuTrigger>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</thead>

通过以上两种方式修复表格结构后，colspan属性即可正常生效。

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