MVC webgrid列宽? [英] MVC webgrid column width?

问题描述

现在我正在MVC Webgrid上工作.我需要根据要求设置列宽.

Now am working on MVC webgrid. I need to set the column width based on the requirement.

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

但是它不应用我的网格.我找不到错误.朋友给我解决方法........ 谢谢.

But its not applying my grid. I cant find the error. friends give me the solution........ Thanks advance.

推荐答案

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

You can specify a class for each column as you mentioned. The style you have for your table has fixed-column and most probably that's overriding your custom css. You could remove that class (and use below instead) or alternatively you can try adding !important to your css property. Below should work as expected.

    @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%;
}

这篇关于MVC webgrid列宽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！