How to change width / style for a column of a webgrid in MVC 3 Razor

In webgrid, using the style attribute we can specify a style for a column.

Please do not confuse yourself, by directly putting style=”width:10px” …

Webgrid’s style attribute is more like className !!!

The style attribute needs to have a class name which you may have defined in your css file.

@grid.GetHtml(columns: grid.Columns(
grid.Column("Username", "Username", canSort: true, style: "user"),
grid.Column("Password", "Password", canSort: true, style: "pass")
));

I have defined two seperate CSS classes : user and pass and have given some css property to it, say if you want to change the width of a column you can use the width property.

.user{
width:150px;
font-size:12px;
}

.pass {
width: 100px;
font-weight:bold;
}

Incase of any queries or suggestions, please feel free to write in using the comment section.