Question

I had used a webgrid in a partial view in my project. I had implemented it fine with table style as:

.webgridtablestyle
{
width: 100%;
height: auto;

}

It displays fine. Now i want to define the different widths for different headers in webgrid. So i applied it as:

grid.Column("EquipmentManfacturer", header: "Warranty Provider", style:"width:30%")

But the width had not applied. I tried by giving table-layout: fixed in table style also.The table layout style had applied but the width style had not applied for header. Can any one please help me how to apply different widths for different headers in webgrid. I need to user only percentage for width of the table as the dashboard in which the webgrid was placed was resizable.

Answer 1

As I understand, the style property is actually which class the column gets.

So create a class with the width you want and use that class in the style property.

I.e.

.column1
{
  width: 30%;
}

and then

grid.Column("EquipmentManfacturer", header: "Warranty Provider", style:"column1")

Edit: the width property for the whole grid needs to be set, set a class with tableStyle on the grid and have that class define a width property