如何实现HTML表格中td列分散分布的布局？附代码求助

要做一个包含10条记录、15个分散排列单元格的HTML表格，结合你的需求和现有代码，调整方案如下：

核心问题 #

你当前的代码只是简单生成多行多列，但没利用单元格跨列属性，没法让单元格按你要的分散位置对齐，得用colspan来控制每个单元格占据的列数，匹配目标布局。

修改后的代码 #

<table id="empTable">    
@{
    foreach (var item in Model.builds) {
        <!-- 第一行：4个单元格，按布局设置跨列数，总列数凑15 -->
        <tr>
            <td colspan="3">@item.Build1</td>
            <td colspan="2">@item.Build2</td>
            <td colspan="4">@item.Build3</td>
            <td colspan="6">@item.Build4</td>
        </tr>
        <!-- 第二行：3个单元格，示例均分15列 -->
        <tr>
            <td colspan="5">@item.Build5</td>
            <td colspan="5">@item.Build6</td>
            <td colspan="5">@item.Build7</td>            
        </tr>
        <!-- 第三行：3个单元格，按布局分配列数 -->
        <tr>
            <td colspan="4">@item.Build8</td>
            <td colspan="5">@item.Build9</td>
            <td colspan="6">@item.Build10</td>             
        </tr>
        <!-- 第四行：5个单元格，对应剩余列项 -->
        <tr>
            <td colspan="2">@item.Build11</td>
            <td colspan="3">@item.Build12</td>
            <td colspan="4">@item.Build13</td> 
            <td colspan="4">@item.Build14</td>
            <td colspan="2">@item.Build15</td>
        </tr>
    }
}
</table>

关键注意点 #

• 根据布局示意图调整每个<td>的colspan数值，确保每行所有单元格的colspan总和为15，这样才能让单元格按目标位置分布
• 所有行的总列数必须保持一致（都是15），避免表格结构错位
• 补充Build15的单元格，凑够你需要的15个列项

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