Solved: Re: How to make Background of table headers in col... - Qlik Community

_rohitgharat · ‎2022-10-27

Hi Everyone,

We have a requirement to create Nprinting reports in HTML format.

We are pulling reports from Qliksense Application. We have created report in Table chart in Qliksense.

When trying to apply any HTML format on table like background colour, it is not having any change or impact.

Can anyone help me to resolve this issue?

Requirement: I want to apply background color to headers of table.

Below is the header of a table:

Region Name

Inspection Planned (Allocated)

Allocated %

Inspection Commenced

Commenced %

Inspection Completed

Completed %

Inspection Pending based on completion date

Pending %

Inspection pending based on finalization date

Finalized Date %

Lech_Miszkiewicz · ‎2022-10-27

Hi, Please specify which version of NPrinting you are actually using - it is not clear from the Labels you have chosen when creating this post and creates confusion as version you have chosen have very different capabilities.

To add to the other post above - you need to make sure you disable "Keep source format" in Properties on this table (in NPrinting Designer) for any formatting implemented in HTML to work: https://help.qlik.com/en-US/nprinting/May2022/Content/NPrinting/ReportsDevelopment/Designer-properti...

thanks

Lech

cheers Lech, When applicable please mark the correct/appropriate replies as "solution" (you can mark up to 3 "solutions". Please LIKE threads if the provided solution is helpful to the problem.

View solution in original post

andregas · ‎2022-10-27

Hello @_rohitgharat ,

If you use the table tag to generate the html code of table you could only use css to edit it:

table tbody tr:first-child {
background: red;
}

I suggest you to insert the table into a div with id to limite the style at only that table, then you should edit the selector like this: "#divid table tbody tr:first-child"

Otherwise, you could create table using single column tag, NPrinting editor create the html code of the table and than you could personalize it.
There are two option, if you choose "show header = show" you should use same solution as before, but if you choose "show header = hide" you could insert the header manually as you prefer.

Below an example of code

First table is generated by NPrinting using table tag.

The second table is the same object of the first but use the column tag.

The third one use the column tag but in NP table object I setted "show header = hide".

<html>
<head>
<style>
#example table tbody tr:first-child {
background: red;
}

#red-bg tr:first-child {
background: red;
}

.header-red {
background: red;
}
</style>
</head>
<body> 
<div id="example">
%%LFJpkPn%%
</div>

<div>
<p></p>
<p>line break</p>
<p></p>
</div>

<table cellspacing=0 style="border-collapse:collapse;" id="red-bg">
<tr>
<td>%%Cod%%</td>
<td>%%Sum(Value)%%</td>
</tr>
</table>

<div>
<p></p>
<p>line break</p>
<p></p>
</div>

<table cellspacing=0 style="border-collapse:collapse;">
<tr class="header-red">
<td>Cod</td>
<td>Value</td>
</tr>
<tr>
<td>%%Cod_1%%</td>
<td>%%Sum(Value)_1%%</td>
</tr>
</table>
</body>
</html>

Regards

Lech_Miszkiewicz · ‎2022-10-27

Hi, Please specify which version of NPrinting you are actually using - it is not clear from the Labels you have chosen when creating this post and creates confusion as version you have chosen have very different capabilities.

To add to the other post above - you need to make sure you disable "Keep source format" in Properties on this table (in NPrinting Designer) for any formatting implemented in HTML to work: https://help.qlik.com/en-US/nprinting/May2022/Content/NPrinting/ReportsDevelopment/Designer-properti...

thanks

Lech

cheers Lech, When applicable please mark the correct/appropriate replies as "solution" (you can mark up to 3 "solutions". Please LIKE threads if the provided solution is helpful to the problem.

_rohitgharat · ‎2022-11-03

Hi @Lech_Miszkiewicz @andregas ,

Below is the sample code i have written:

so i want to apply background color for the headers of these table.

Can you please tell me the correct code which i need to apply?

Regards,

Rohit Gharat

Lech_Miszkiewicz · ‎2022-11-03

Well, you have not done this right. Have you studied the basic tutorial from help site to get understanding how things work in NPrinting HTML template? If not - you need to do this as everything is described there

When you build a template using the method described you will be able to choose whether you want to show headers or not and you will get <tr><td> and <table> tags which will allow you to apply css on it.

You can also choose to hide headers and write your own <th> html tags with the headers individually and apply formatting manually on it or if it needs to be dynamic then you can use variables or formulas to populate it too

cheers

cheers Lech, When applicable please mark the correct/appropriate replies as "solution" (you can mark up to 3 "solutions". Please LIKE threads if the provided solution is helpful to the problem.

How to make Background of table headers in coloured format in Nprinting reports?

Client Managed

Other

Qlik NPrinting

Qlik NPrinting 17.3

Qlik NPrinting February 2021

Qlik NPrinting November 2020

Qlik NPrinting September 2020

Qlik Sense

QlikView