当我的页面有两个网格时,如何在一个网格中设置td的样式?

时间:2013-09-19 08:32:52

标签: javascript jquery css kendo-ui kendo-grid

我的页面有两个名为grid1,grid2的网格,我只想格式化grid1,而不是grid2.I在这个标题中使用css样式,但似乎两个网格都改变了。

.k-grid td {
   color:red;
  padding: 0px;
 }

我尝试这样写,但失败了。

 .GridTd {
 color:red;
 padding: 0px;
}
$("#grid1 td").addClass("GridTd "); //failed
$("#grid1 k-grid   td").addClass("GridTd ");// faied

我用firebug进行调试,发现默认样式(.k-grid td)使用了td样式,而不是GridTd样式。

 .k-grid td {  
   border-style: solid;    border-width: 0 0 0 1px;   
  line-height: 1.6em;    overflow: hidden;    
  padding: 0.4em 0.6em;    text-overflow: ellipsis;  
  vertical-align: middle;
  }.
.GridTd {  color:red;   padding: 0;}

2 个答案:

答案 0 :(得分:1)

如果这两个规则与您的代码示例的顺序相同

然后这与css

的特异性有关

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://css-tricks.com/specifics-on-css-specificity/

一种解决方案是使用.css() jQuery函数

指定css

http://api.jquery.com/css/

实施例

$("#grid1 td").css({  "color":"red", "padding": "0"});

答案 1 :(得分:0)

我有同样的问题,我正在使用kendo MVC包装器。以下是我处理它的方式:

@(Html.Kendo().Grid<Model>()
    .Name("MyGrid")
    .HtmlAttributes(new { @class = "k-grid-MyGrid" } )

    ...(Imagine the rest of the grid)
)

然后在这样的css参考中:

<style type="text/css">
    .k-grid-MyGrid td {
        white-space: nowrap;
    }
</style>

希望对你有所帮助。