I want to style jqgrid headers like this:
As it is currently seen, if the green color and white letters styles are applied, the problem is that it is applied to all the headers, whether they have content or not, as it could only apply to the headers that contain text or content, the code that I apply is the Next:
.ui-th-div {
display: inline-block;
background-color:#00a65a !important;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
border-radius: 10px;
}
Jqgrid statement:
<div style="widows: 100px; overflow:auto;">
<table id="gridOrdenesPedido"></table>
</div>
<div id="pagerOrdenesPedido" style="color:black"></div>
As you know, Jqgrid takes care of automatically creating the entire structure of the reference grid:
I think the simplest is to use javascript. Once your jqgrid is created, you go through the elements with class
.ui-jqgrid-sortable
(they are eachdiv
of yourheaders
) and if the content text is empty we add the classui-th-div
to said element ($(this).text().trim() !== ""
)You could also add an index
i
toeach()
and select the columns you want to apply the style to: