Выравнивание WebGrid в MVC3 с RAZOR

Question

Я хочу установить различную ширину и выравнивание во всех столбцах WEBGRID в MVC 3. Это означает, что в приведенном выше коде у меня есть 5 столбцов, теперь я хочу установить различное выравнивание и ширину все заголовки.

Ниже мой код:

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

Поскольку не существует встроенный способ контроля ширины, вы должны будете использовать CSS стиль. Сначала дайте классы строк заголовка и тела:

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

Тогда стиль их с помощью п-го ребенка селекторы псевдо-класса, например:

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