MVC webgrid列宽？

Posted 2023-05-09

【中文标题】MVC webgrid列宽？

【英文标题】：MVC webgrid column width?

【发布时间】：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>

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

【参考方案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%;