回发后 webgrid 上的列宽丢失答案

【问题标题】：Column width on webgrid lost after postback回发后 webgrid 上的列宽丢失
【发布时间】：2014-06-22 23:36:52
【问题描述】：

我有一个非常简单的 3 列 webgrid：

查看

            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))
        {

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

【问题讨论】：

您展示的 CSS 与一个类相关联。丢失的宽度意味着该类正在从网格中丢失。如果您在回发后查看网格，您还能看到类吗？
嗨，马特，感谢您的回复，好点子，是的，我在页面发布后检查了开发人员工具并且仍然应用了样式，这就是为什么我真的很困惑。

标签： css .net asp.net-mvc-4 razor webgrid

【解决方案1】：

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

【讨论】：

我明白你的意思，我检查了我的技能列中的数据，对于一个条目，它是非常长的字符串，没有空格，所以样式不能应用于这个特定的字段，所以被推送列宽。谢谢你，我在这上面浪费了很多时间，我不会想到检查那个。

【解决方案2】：

确保在回发后网格仍然有应用到它们的类。

另外，请发布 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 */
}

【讨论】：