MVC3 WebGrid格式或造型列標題

我正在使用新的MVC3 WebGrid。到目前爲止很好，只是有問題的樣式/格式化列標題。我得到的最好的解決方法是將WebGrid的第一行應用於表頭的相同css類。MVC3 WebGrid格式或造型列標題

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屬性）？

來源

2011-02-01 sambomartin

不，截至目前，沒有內置的方式可以獨立設置標題單元格的樣式，只需通過headerStyle屬性設置標題行。

我認爲你的解決方法已經足夠好了。

來源

2011-02-05 22:28:47 Gh0sT

感謝，這似乎相當有限，不是嗎？ – sambomartin 2011-02-06 22:24:47

聽到這個很難過...... – Jason 2011-02-17 03:07:49

我知道這是一個古老的問題，但這對於偶然發現的觀衆來說可能是有用的。：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-04 13:39:40 Evert

我們可以使用如下代碼Javascript來做到這一點。

JsFiddle Example

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

來源

2015-11-06 13:58:18

MVC3 WebGrid格式或造型列標題

回答

相關問題