Styling tables

[Perzival]

Hello,

I want to add a characteristic to my data in my search and report.

I want to like highlight a row when the user hovers his cursor to that row to indicate the selected data set.

I know that it is possible but not really sure how to do it.

I appreciate any help.

[Harbinger]

Hello, you can add a header and footer to that particular DataPage then disable the "enable HTML editor" from the advance tab, and in the standard tab, kindly right the following script.

<style>

#caspioform > table tbody tr:hover {
    background-color: #f5f5f5;
}

</style>

[Perzival]

Hi @Harbinger

For some reason, this code is not working on my end and shows up in my DataPage.  Any thoughts?

[Harbinger]

I see. I forgot to encapsulate the code inside the <style></style> tag. I updated my answer.

Let me know if it works.

[Perzival]

You're awesome, it did now worked! One more thing, if I wanted to have the same style applied to all my pages do I have to include this code to each DataPages? Perhaps there is another way? Thanks!

[kpcollier]

@Perzival You could try editing it in Styles. If you are using the same Style across your search and reports, you can edit the specific style. Under DataPage Elements, select the different options you want to change. Here, you could go to Data or Table Layout and change the 'Hovered' color to whatever you want. You can check the preview before saving.

 

[kpcollier]

If your search and report is a Tabular report, go to Table Layout in the Style setting. Then for the Element Type select Data Rows and change Hovered Rows to the desired color. Make sure Enable Hovered Rows is checked, too. Then apply this style to whatever pages you want and they all should have the same effect.

 

[Harbinger]

Just to add, in case you want a fully customizable style, you can go to the Styles as what KPCollier instructed, then go to the source and look for the tr tag.

From there you can add CSS codes to customize your table's attributes.