css - MVC3 中的 WebGrid 对齐与 RAZOR

Question

我想在 MVC 3 的 WEBGRID 中的所有列中设置不同的宽度和对齐方式。这意味着在上面的代码中我现在有 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"
    // ...
)

然后使用 nth-child 伪类选择器设置它们的样式，例如：

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