WebGrid Alignement dans MVC3 avec RAZOR

Question

Je veux définir différent - la largeur et l'alignement différents dans toutes les colonnes dans WEBGRID dans MVC 3. Cela signifie que dans le code ci-dessus j'ai maintenant 5 colonnes je veux définir l'alignement et la largeur de tous les en-têtes.

Ci-dessous mon code:

@{WebGrid grid = new WebGrid(); 
    if (@Model.VendorItemsList != null) 
    { 
     grid = new WebGrid(source: @Model.VendorItemsList, ajaxUpdateContainerId:   "gridSearch", canSort: true, rowsPerPage: Model.PageSize); 
    } 
} 
<div id="gridSearch" class="tableGrid"> 
    @{    
     @grid.GetHtml(
      mode: WebGridPagerModes.All, 
      columns: grid.Columns(
      grid.Column("VendorItemName", header: @GeneralResource.Vendor + " " + @GeneralResource.Item + " " + @GeneralResource.Name), 
      grid.Column("ItemName", header: @GeneralResource.Item), 
      grid.Column("ItemCategoryName", header: @GeneralResource.Category), 
      grid.Column("VendorName", header: @GeneralResource.Vendor) 
      )) 
     } 
    } 
</div> 

Answer 1

Comme il n'y a pas un moyen intégré pour contrôler la largeur, vous devrez utiliser un style CSS. Tout d'abord donner des cours aux lignes d'en-tête et le corps:

@grid.GetHtml(
    headerStyle: "header_row", 
    rowStyle: "item_row" 
    // ... 
) 

style, puis les en utilisant les sélecteurs pseudo-classe nième enfant, par exemple:

tr.header_row th:nth-child(1) { width: 100px; } 
tr.header_row th:nth-child(2) { width: 75px; } 
tr.header_row th:nth-child(3) { width: 50px; } 

tr.item_row td:nth-child(1) { width: 100px; } 
tr.item_row td:nth-child(2) { width: 75px; } 
tr.item_row td:nth-child(3) { width: 50px; }