Jump to content

Recommended Posts

To hide particular columns (and column header) in tabular report page, add the following codes to the header and the footer

This goes in header:

<style>
#target table:nth-of-type(2) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(2) th:nth-of-type(3)  {display: none;}

#target table:nth-of-type(2) td:nth-of-type(4)  {display: none;}
#target table:nth-of-type(2) th:nth-of-type(4)  {display: none;}

#target table:nth-of-type(2) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(2) th:nth-of-type(5)  {display: none;}
</style>

<div id="target">

Add this to the footer:

</div>


The above style will hide columns 3,4 & 5. The number in table:nth-of-type(2)  depends on your result page design. If your result table is the first on the result page (case when you don't have download, or sort by dropdown or has a search form), this number should be 1. If you have download or sort by, or pre-defined criteria this number should be 2.

Number in td:nth-of-type(3) shows which column you want to hide. 1 refers to the first column, 2 second column and so on..

Also please note that this style is not supported by IE 8 and less. It should be fine on all other browsers.

Share this post


Link to post
Share on other sites

If you have sticky header enabled you need to add one more line to each

 

#target table:nth-of-type(1) td:nth-of-type(3)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(3)  {display: none;}
#target table:nth-of-type(2) th:nth-of-type(3)  {display: none;}

Share this post


Link to post
Share on other sites

May, your code is working and is taking away my style in the header bar. See the attached image. The last "RED SQUARE" Indicates the column to be hidden. It is working fine but taking away the blue background. How do I get the missing blue background to match the blue bar length to the gray bar below? The contents of the field (Shown as BLUE BOXES) is also not hiding

2018-03-14_17-25-54.png

Share this post


Link to post
Share on other sites

Hi Rmohanr,

If you want to hide the text from the header bar, you can try this:

From MayMusic's answer, replace with:

#target table:nth-of-type(2) th:nth-of-type(3)  {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

or for sticky headers:

#target table:nth-of-type(2) th:nth-of-type(5)  {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

I hope this will help you.

Share this post


Link to post
Share on other sites

I have a table with 38000 records and when i group them and collapse it only shows the collapsed group for max 1000 records.

I don't actually need to see the records, only the group aggregate. Can I hide the result rows and only show the Group total line so I have a nice neat table showing all the group totals not expandable?.

 

Summary table.jpg

Share this post


Link to post
Share on other sites

Just an update, for new version of Styles and when your DataPage's configuration is set to "enable responsive". Here's the new code:

Header: 
 

<style>
 
#target table:nth-of-type(1) td:nth-of-type(5)  {display: none;}
#target table:nth-of-type(1) th:nth-of-type(5)  {display: none;}

</style>
 
</header>
<div id="target">
<header>


Footer: 

</footer>
</div>
<footer>


Thank you @Vitalikssssss for this solution. 

For reference of new responsive feature, you could check it here: 
https://howto.caspio.com/datapages/responsive-datapages/prerequisites/
https://howto.caspio.com/release-notes/caspio-bridge-21-0/

Hope it helps!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...