0

任何人都可以建议我用不同的方式来设计具有相同类别的 2 个标签吗？

我有 2 张桌子

<table id="tab1" class=".ui-jqgrid .ui-jqgrid-hbox">
<table id="tab2" class=".ui-jqgrid .ui-jqgrid-hbox">

第一个表是页面上的 jqgrid，第二个表标签有 jqgrid，它位于弹出窗口内。现在我想对两个 jqgrids 的顶部（标签/列）行进行不同的样式设置。但是每当我应用应用样式时

.ui-jqgrid .ui-jqgrid-htable th div {
    height: auto;
    overflow: hidden;
    padding-right: 4px;
    padding-top: 2px;
    position: relative;
    vertical-align: text-top;
    white-space: normal !important;
}

它影响两个表格标签。我希望它影响第一个标签，我想将相同的样式应用于其他表格标签但具有额外的属性。请帮助谢谢

4

4 回答 4

1

为什么不保持简单，只使用 id 呢？像这样的东西：

.ui-jqgrid.ui-jqgrid-htable th div {
    /* applies to both tables */
}
#tab1 th div {
    /* applies only to table 1 */
}
#tab2 th div {
    /* applies only to table 2 */
}

还是我误解了这个问题？

.ui-jqgrid.ui-jqgrid-htable请注意，我.ui-jqgrid-htable还删除.ui-jqgrid了两个类选择器（

于 2013-05-27T22:15:52.717 回答
0

If we speak about jqGrid then it's important to understand that we specify initially <table> element like

<table id="list"></table>

which will be dynamically converted to relatively complex structure with different divs and tables which looks about at following

enter image description here

Specifying of CSS with .ui-jqgrid .ui-jqgrid-htable th div {...} you can change formatting of *column headers of the grid. If you have two grids like

<table id="grid1"></table>
<table id="grid2"></table>

and want to specify CSS for column headers only one grid then you id of outer div "gbox" or "gview" which will be build based on the id of the <table> element. For example to apply CSS which you need to the grid #grid1 only you can use

#gview_grid1 .ui-jqgrid-labels th div {
    height: auto;
    overflow: hidden;
    padding-right: 4px;
    padding-top: 2px;
    position: relative;
    vertical-align: text-top;
    white-space: normal !important;
}

I used class ui-jqgrid-labels of <tr> instead of ui-jqgrid-htable to be sure that the CSS be applied on column headers only even if you searching toolbar in the grid.

于 2013-05-28T06:03:46.440 回答
0

如果这适合你

HTML

<table id="tab1" class="ui-jqgrid ui-jqgrid-htable">
<table id="tab2" class="ui-jqgrid ui-jqgrid-htable anotherClass">

CSS

.ui-jqgrid.ui-jqgrid-htable th{
    height: auto;
    overflow: hidden;
    padding-right: 4px;
    padding-top: 2px;
    position: relative;
    vertical-align: text-top;
    white-space: normal !important;
}

.ui-jqgrid.ui-jqgrid-htable.anotherClass th{
    /* some different styles*/
}

class=".ui-jqgrid .ui-jqgrid-hbox"还要从类名中删除点。检查演示，第二个表有不同的颜色字体。

演示。

于 2013-05-27T22:17:27.097 回答
0 
#tab1{
  padding: 5px;
}
#tab2{
  padding: 2px;
}

我本来会id在css中使用's。

于 2013-05-27T22:22:20.817 回答