MVC3 WebGrid 格式化或样式化列标题答案

【问题标题】：MVC3 WebGrid Formatting or Styling Column HeadersMVC3 WebGrid 格式化或样式化列标题
【发布时间】：2011-06-19 15:26:56
【问题描述】：

我正在使用新的 MVC3 WebGrid。到目前为止一切顺利，只是在列标题的样式/格式方面存在问题。我最好的解决方法是将 WebGrid 第一行中的相同 css 类应用于表头。

var headerCells = $("#grid tr:eq(0) th");
var firstRowCells = $("#grid tr:eq(1) td");

$.each(firstRowCells, function (index, value) {
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});

这个例子显然没有检查是否有行或确实有指定的元素 id，但它将第一行的 css 类应用到标题行，这意味着您可以彼此独立地设置样式。

td.my-column-style { width:100px }
th.my-column-style { text-align:right;}

是否有一种内置的方式来设置列标题元素的样式（不仅仅是使用 headerStyle 属性）？

【问题讨论】：

标签： header coding-style asp.net-mvc-3 webgrid

【解决方案1】：

不，目前还没有内置的方法来独立设置标题单元格的样式，只有通过 headerStyle 属性设置标题行。

我认为您的解决方法已经足够好了。

【讨论】：

@Jason 确实如此。 WebGrid 是一场大灾难！

【解决方案2】：

我知道这是一个老问题，但这可能对偶然发现它的观众有用。 :nth-child css 伪选择器是您的朋友，如果您不想依赖 javascript 来复制类。使用 tableStyle 属性很容易将一个类添加到您的 webgrid，然后您可以使用以下 css 设置各个标题的样式：

.webgridclass tr th:nth-child(1){
    background:#ff0;
}

.webgridclass tr th:nth-child(2){
    background:#f60;
}

不幸的是，IE8 和更早的 IE 不支持此功能，但它在所有适当的浏览器（比 FF3 更新）中都完全支持。

【讨论】：

【解决方案3】：

我们可以使用下面的Javascript 代码来做到这一点。

JsFiddle Example

$("table tr th:nth-child(n)").addClass("col-md-1");

【讨论】：