javascript - MVC webgrid 列宽？

Question

现在正在研究 MVC webgrid。我需要根据要求设置列宽。

网格:

 @{ 
    var grid = new WebGrid(source: Model.TenantList, rowsPerPage: 11, canPage: true, canSort: false);
        @grid.Table(
        headerStyle: "headerStyle",
        tableStyle: "table table-responsive fixed-column fixed-column table-striped table-hover a-grid",
        alternatingRowStyle: "alternateStyle",
        htmlAttributes: new { id = "tenantgrid" },
        columns: grid.Columns(
        grid.Column("Action", style: "labelcolumn cchk",format:@<text><input class="checkbox cchk" id="assignChkBx" name="assignChkBx" value="@item.Person_Code" type="checkbox" onClick="assignChkBx()" /></text>),
        grid.Column("TitleName"),
        grid.Column("FullName",style: "name-width"),
        grid.Column("Employee_Number"),
        grid.Column("Fathername"),
        grid.Column("Address"),
        grid.Column("EMAILID")
        )
    )
    }

CSS:

.name-width {
        width:500px;
    }

问题是这个类是这样调用的

<td class="name-width">AMEER ABOOBACKER</td>

但它没有应用我的网格。我找不到错误。 friend 们给我解决方案吧...... 提前致谢。

Answer 1

您可以为您提到的每一列指定一个类。您的表格样式具有固定列，并且很可能会覆盖您的自定义CSS。您可以删除该类(并在下面使用)，或者您可以尝试将 !important 添加到您的 css 属性中。下面应该按预期工作。

    @grid.GetHtml(tableStyle: "table table-hover",
                      columns:
        grid.Columns
        (
                grid.Column("Property1", "Property1", style: "Large"),
                grid.Column("Property2", "Property2", style: "Small")
                grid.Column("Action", format: @<text>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id})
                    | @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </text>, style: "action", canSort: false)))

<style type="text/css">
.Large{
    width: 20%;
}

.Small{
    width: 5%;
}