回发后webgrid上的列宽丢失

Question

我有一个非常简单的网页，包含3列：

查看

            columns: grid.Columns(
        grid.Column("Applicant Name",
        format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
                 null), style: "AppName")
                 , grid.Column("Role", "Role", style: "Role") 
        , grid.Column("ApplicantSkills", "Skills", style: "AppSkills") 

我想将列设置为固定宽度。我已尝试在这里使用百分比宽度和500px，100px等精确宽度，它们最初都有效，但在回发后会丢失。

css：

.AppSkills {
    width: 70%;
}
.AppName {
    width: 20%;
}

.Role {
    width: 10%;
}

我的网格是一个结果网格，由多个过滤器填充，因此每次用户选择不同的过滤器并单击搜索时，结果都会更改并重新填充网格。我发现的是网格列宽度样式正在丢失。这是我的屏幕的样子。最初它看起来很好，但在选择不同的过滤器并点击搜索后，网格列宽度就会丢失。

我尝试将我的表单发布为GET和POST，以查看是否正在丢失格式的Get。但两者都会产生相同的结果。

  @using (Html.BeginForm("Search", "Home", FormMethod.Post))
        {

有什么明显的我在这里做错了吗？或者有什么方法可以确保我的网格列上的固定宽度，以便它们不会移动？

Answer 1

确保在回发后网格仍然应用了类。

另外，请发布HTML给我们查看，以便我们可以诊断问题，因为我们不确定它们是样式div还是表格。

如果是表格，请尝试运行以下CSS。基本上，它会在没有类名的情况下单独定位列，以防在回发期间丢失类。

td:nth-child(3) {
    width: 70%;      /* targeting the skills column */
}
td:nth-child(1) {
    width: 20%;      /* targeting the name column */
}
td:nth-child(2) {
    width: 10%;      /* targeting the role column */
}

Answer 2

您在逗号后面缺少空格，因此它可能会将其中一个条目视为一个不可破解的大词。如果您无法更改基础数据，假设代码不进行连接，您可以使用css word-break属性对其进行排序。