Colspan 强制设置相等的列宽

Posted 2023-04-09

【中文标题】Colspan 强制设置相等的列宽

【英文标题】：Colspan forcibly setting equal column widths

【发布时间】：2021-10-09 17:46:23

【问题描述】：

我有一个像这样列宽相等的表格（比如 1:1:1 的比例）：

我想根据标题文本调整列宽（更长的标题会有更多的列宽，反之亦然 - 像这样（比如 0.5:0.5:2 的比率）：

下面是我生成标题行的代码（我使用的是 ASP.Net MVC Razor 语法辅助方法）：

 @th.HeaderRow(@<tr>
        <th class="border-bottom" style="width: 300px;" colspan="3">Header Ln 1/th>
    </tr>)

 @th.HeaderRow(@<tr>
        <th style="width: 100px;">Header Ln 2 Col 1</th>
        <th style="width: 100px;">Header Ln 2 Col 3</th>
        <th style="width: 100px;">Header Ln 2 Col 3</th>
    </tr>)
   
 // code for generating the data rows
.....

我无法将这些单独列的宽度调整为唯一值（例如 50px、50px、200px）；由于colspan，它们都被设置为相同的值。

我怎样才能做到这一点？

【参考方案1】：

如果您查看上一个屏幕截图，您实际上有 4 列，前两列是它们自己的单元格，最后一列跨越两列。因此，您的标题需要是 colspan 4。

@th.HeaderRow(@<tr>
        <th class="border-bottom" style="width: 300px;" colspan="4">Header Ln 1/th>
    </tr>)