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

How to style the td in only one grid when my page have two grids?

本文关键字：网格 一个 样式 td 设置 我的 两个      更新时间：2023-09-26

我的页面有两个网格，称为grid1，grid2，我只想设置grid1的样式，而不是grid2。我像这样在标题中使用 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调试，发现td样式默认使用style（.k-grid td），而不是GridTd Style。

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

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

那么这与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"});

我遇到了同样的问题，我使用的是剑道 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>

希望对您有所帮助。

相关文章：