Aplicar ancho específico en la columna de WebGrid en MVC3

Question

he utilizado WebGrid para tomar ventaja de clasificación incorporada y de paginación en la aplicación MVC y ha funcionado muy bien sólo un problema que no podía fijar y mirando aquí para obtener ayuda de nadie

Mi WebGrid se parezca según abajo

@{ 
     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), 
     grid.Column("Address", "Address", canSort: true),   
     //other columns 
     )); 
    } 

Cómo puedo fija el ancho de cada columna como por mi requisito? (necesidad de ancho diferente para diferentes columna)

Answer 1

usted podría utilizar estilos:

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

y en su archivo CSS: Sólo

.name { 
    width: 50px; 
} 

.address { 
    width: 300px; 
} 

Answer 2

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

Answer 3

Para añadir a el buen consejo de Darin Dimitrov, recomendaría una convención (ya que CSS promueve la reutilización), intenta utilice estilos existentes o comunes para elementos de uso frecuente (por ejemplo, columnas); recuerde que puede aplicar varios estilos, separados por un espacio aquí también; simplemente se fusionarán en el atributo resultante.

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

tanto, en otras palabras, usted no está pegado con un solo paquete de estilo de un continuarán teniendo la flexibilidad en la aplicación de la "reutilización".