colspan 强制设置相等的列宽

Question

我有一个 table，它具有这样的等宽列宽（比如 1:1:1 的比率）：

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

下面是我生成 header 行的代码（我使用的是 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.

，它们都以某种方式设置为相同的值

我怎样才能做到这一点？

Answer 1

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

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

colspan 强制设置相等的列宽

Colspan forcibly setting equal column widths

html

css

c#

asp.net-mvc

razor