12

我正在使用新的 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 属性)?

4

3 回答 3

5

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

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

于 2011-02-05T22:28:47.213 回答
4

我知道这是一个老问题,但这可能对偶然发现它的观众有用。: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 更新)中都完全支持。

于 2013-07-04T13:39:40.343 回答
1

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

JsFiddle 示例

$("table tr th:nth-child(n)").addClass("col-md-1");
于 2015-11-06T13:58:18.137 回答