MVC webgrid列宽?

时间:2015-10-19 14:09:25

标签: javascript c# jquery twitter-bootstrap model-view-controller

现在正在开发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>

但它没有应用我的网格。我找不到错误。朋友给我解决方案........  谢谢你。

1 个答案:

答案 0 :(得分:0)

如上所述,您可以为每列指定一个类。 您的表格样式有固定列,最有可能是覆盖您的自定义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%;
}