MVC WebGrid的列宽？

Question

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

Grid:

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

problem is the class is called like this

<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.

Answer 1

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