【问题标题】：MVC webgrid column width?MVC webgrid列宽？
【发布时间】：2016-01-17 22:20:46
【问题描述】：

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

但它没有应用我的网格。我找不到错误。朋友们给我解决办法………… 提前谢谢。

【问题讨论】：

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

【解决方案1】：

您可以为每个列指定一个类，如您所提到的。您的表格样式具有 fixed-column 并且很可能会覆盖您的自定义 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%;
}

【讨论】：