[ACCEPTED]-Apply specific width in column of WebGrid in MVC3-razor

Accepted answer
Score: 26

You could use styles:

@grid.GetHtml(columns: grid.Columns(
    grid.Column("Name", "Name", canSort: true, style: "name"),
    grid.Column("Address", "Address", canSort: true, style: "address")
));

and in your CSS file:

.name {
    width: 50px;
}

.address {
    width: 300px;
}

0

Score: 1

To add to the good advice of Darin Dimitrov, would 9 further recommend a convention (since CSS 8 promotes reuse), try to use existing or 7 common styles for often used elements (e.g., columns)--remember 6 that you can apply multiple styles, separated 5 by a space here, too--they will simply be 4 merged into the resulting attribute.

@{
    var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
    grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(columns: grid.Columns(

    grid.Column("Name", "Name", canSort: true, style: "col-sm cssStyle2"),
    grid.Column("Address", "Address", canSort: true, style: "col-med address"),        
    //other columns
    ));

}

/*styles*/
.col-sm { width: 100px; min-width: 90px; }
.col-med { width: 150px; min-width: 120px; }  <--could be reused
.address { font-weight: bold; } <-- could be reused
.cssOther3 { font-weight: bold; }  <-- may not be as not as reusable
.cssStyle2 { text-align: right; }  

So, in 3 other words, you're not stuck with a single 2 style package a continue to have flexibility 1 when applying "reuse".

Score: 0

Only CSS

/*IE7+*/  
th:first-child  { width:30px; }  
th:first-child + th { width:30px; }  
th:first-child + th + th  { width:100px; }  
/*IE9 +*/  
th:nth-of-type(1) { width:30px; }  
th:nth-of-type(2) { width:30px; }  
th:nth-of-type(3) { width:100px; }  
th:nth-of-type(4) { width:200px; }  
th:nth-of-type(5) { width:40px; }  

0

More Related questions