css - How can I put color on specific row headings? -

css - How can I put color on specific row headings? -

suppose have next zk pivottable layout.

zk pivottable layout

the next content of .zul file :

<?page title="kissa : sample pivottable" ?> <zk xmlns:h="native"> <style src="/resources/css/mycss.css"/> <window apply="com.sample.view.zk.controller.kissacontroller" hflex="max"> <pivottable id="pivot" hflex="max" grandtotalforcolumns="false" grandtotalforrows="false" > <div style="color: red">my info title</div> <div style="color: blue">my column title</div> <div style="color: green">my row title</div> </pivottable> </window> </zk>

now, want set color first 2 columns of row headings. how can possible it? there way can render css class rendercellstyle() in simplepivotrenderer class?

i don't have thought how .zul file beingness converted html/css/javascript yet. zk automatically generate files.

and here's generated part of pivottable :

<div id="nfyp0-cave" class="z-window-content"><div style="" id="nfyp1" class="z-pivottable"><div class="z-pivottable-wrapper"><table id="nfyp1-body" class="z-pivottable-body" cellpadding="0" cellspacing="0"><tbody><tr style="height: 0px;"><th style="width: 100px;"></th><th style="width: 100px;"></th><th style="width: 100px;"></th><th style="width: 100px;"></th><th style="width: 100px;"></th><th id="nfyp1-coltitlefaker" style="width: 1402px;"></th></tr><tr style="height:20px"><th id="nfyp1-datatitle" colspan="5" style="width:500px;height:20px" class="z-pivottable-first-col z-pivottable-data-title"><div class="z-pivottable-field-wrapper"><div id="nfyp2" style="color: red;" class="z-div"><span id="nfyp3" class="z-label">my info title</span></div></div></th><th id="nfyp1-coltitle" style="width: 1402px; height: 20px;" class="z-pivottable-col-title"><div class="z-pivottable-field-wrapper"><div id="nfyp4" style="color: blue;" class="z-div"><span id="nfyp5" class="z-label">my column title</span></div></div></th></tr><tr style="height: 19px;"><th id="nfyp1-rowtitle" rowspan="1" colspan="5" style="width:500px" class="z-pivottable-first-col z-pivottable-row-title"><div class="z-pivottable-field-wrapper"><div id="nfyp6" style="color: green;" class="z-div"><span id="nfyp7" class="z-label">my row title</span></div></div></th><td style="" rowspan="7"><div style="width: 1402px;" id="nfyp1-inner" class="z-pivottable-inner"><div style="width: 100px;" id="nfyp1-cnt" class="z-pivottable-cnt"><table id="nfyp1-cell" class="z-pivottable-cell-body " style="width: 100%;" cellpadding="0" cellspacing="0"><tbody style="visibility:hidden; height:0px"><tr id="nfyp1-inner-faker" class="z-pivottable-inner-faker"><th width="100px"></th><th id="z-pivottable-inner-fakerflex"></th></tr></tbody><tbody><tr style="height: 19px;"><th class="z-pivottable-col-field"><div class="z-pivottable-field-wrapper">残数</div></th></tr><tr style="height: 22px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">25.60</div></td></tr><tr style="height: 22px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">425.50</div></td></tr><tr style="height: 22px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">50.80</div></td></tr><tr style="height: 21px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">54.70</div></td></tr><tr style="height: 21px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">25.60</div></td></tr><tr style="height: 21px;"><td style="color: pink; font-weight: bold" class="z-pivottable-cell-field"><div class="z-pivottable-field-wrapper">652.40</div></td></tr></tbody></table></div></div></td></tr><tr style="height: 22px;"><th rowspan="6" style="width:100px" class="z-pivottable-first-col z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>拠点案</div></th><th rowspan="6" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>販売</div></th><th rowspan="6" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>販売量</div></th><th rowspan="2" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>お客様fo</div></th><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">aaaa</div></th></tr><tr style="height: 22px;"><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">bbbb</div></th></tr><tr style="height: 22px;"><th rowspan="2" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>お客様po</div></th><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">aaaa</div></th></tr><tr style="height: 21px;"><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">bbbb</div></th></tr><tr style="height: 21px;"><th rowspan="2" style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper z-pivottable-merged-field"><div class="z-pivottable-icon z-pivottable-icon-expd"></div>お客様引合</div></th><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">aaaa</div></th></tr><tr style="height: 21px;"><th style="width:100px" class="z-pivottable-row-field"><div class="z-pivottable-field-wrapper">bbbb</div></th></tr><tr style="display: none;" height="30px"><td colspan="6" class="z-pivottable-scroll"><div name="_z_6" id="_z_6" style="display:none;" class="z-paging"><ul><li><a disabled="disabled" name="_z_6-first" class="z-paging-button z-paging-first"><i class="z-paging-icon z-icon-angle-double-left"></i></a></li><li><a disabled="disabled" name="_z_6-prev" class="z-paging-button z-paging-previous"><i class="z-paging-icon z-icon-angle-left"></i></a></li><li><input name="_z_6-real" class="z-paging-input" value="1" size="3" type="text"><span class="z-paging-text"> / 1</span></li><li><a disabled="disabled" name="_z_6-next" class="z-paging-button z-paging-next"><i class="z-paging-icon z-icon-angle-right"></i></a></li><li><a disabled="disabled" name="_z_6-last" class="z-paging-button z-paging-last"><i class="z-paging-icon z-icon-angle-double-right"></i></a></li></ul></div><div style="display: none;" id="nfyp1-scroll" class="z-pivottable-scroll"><div></div></div></td></tr></tbody></table></div><div style="left: 100px; top: 44px; height: 129px; display: none;" id="nfyp1-rsr" class="z-pivottable-resizer"><div class="z-pivottable-resizer-handle"></div></div></div></div>

please help. thanks.

css pivot-table zk