Master 1 Posted November 11, 2015 Report Share Posted November 11, 2015 How can I hide some columns in tabular report without having extra spaces? I have some calculated field which I need to hide. Quote Link to post Share on other sites
MayMusic 117 Posted November 11, 2015 Report Share Posted November 11, 2015 To hide particular columns (and column header) in tabular report page, add the following codes to the header and the footerThis 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. Quote Link to post Share on other sites
MayMusic 117 Posted September 29, 2016 Report Share Posted September 29, 2016 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;} Quote Link to post Share on other sites
rmohanr 0 Posted March 15, 2018 Report Share Posted March 15, 2018 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 Quote Link to post Share on other sites
thirdcharm 2 Posted March 15, 2018 Report Share Posted March 15, 2018 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. Quote Link to post Share on other sites
Corpcat 2 Posted September 12, 2018 Report Share Posted September 12, 2018 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?. Quote Link to post Share on other sites
Teshan 0 Posted March 9, 2020 Report Share Posted March 9, 2020 This configuration does not work with new styles in version 21.0 Quote Link to post Share on other sites
Meekeee 6 Posted May 25, 2020 Report Share Posted May 25, 2020 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! Quote Link to post Share on other sites
rush360 0 Posted October 22, 2020 Report Share Posted October 22, 2020 I have hidden 4 calculated fields with the below code for a responsive datapage. The columns are successfully hidden but I also have an aggregation to achieve a total. In the screenshot below, the aggregation is no longer aligned with the column. How can the code be modified to include the aggregation? Header <style> #target table:nth-of-type(1) td:nth-of-type(6) {display: none;} #target table:nth-of-type(1) th:nth-of-type(6) {display: none;} #target table:nth-of-type(1) td:nth-of-type(7) {display: none;} #target table:nth-of-type(1) th:nth-of-type(7) {display: none;} #target table:nth-of-type(1) td:nth-of-type(8) {display: none;} #target table:nth-of-type(1) th:nth-of-type(8) {display: none;} #target table:nth-of-type(1) td:nth-of-type(9) {display: none;} #target table:nth-of-type(1) th:nth-of-type(9) {display: none;} </style> </header> <div id="target"> <header> Footer </footer> </div> <footer> Quote Link to post Share on other sites
CoopperBackpack 24 Posted October 23, 2020 Report Share Posted October 23, 2020 Hello @rush360, Please add this code to the Footer and test. It works on my end. <script> document.addEventListener('DataPageReady', changeColSpan); function changeColSpan() { var elem = document.querySelector('.cbResultSetTotalsLabelCell'); var currentColSpan = elem.colSpan; elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed document.removeEventListener('DataPageReady', changeColSpan); } </script> Hope this helps! Quote Link to post Share on other sites
rush360 0 Posted October 24, 2020 Report Share Posted October 24, 2020 Thank you @CoopperBackpack! Works perfectly. Quote Link to post Share on other sites
wgroth 0 Posted January 16 Report Share Posted January 16 I found this code can work in the header to hide columns in tabular reports, but stops working for me if other text in the header is modified. Of course, the footer code is also needed. <style> #target table:nth-of-type(1) td:nth-of-type(2) {display: none;} #target table:nth-of-type(1) th:nth-of-type(2) {display: none;} #target table:nth-of-type(1) td:nth-of-type(4) {display: none;} #target table:nth-of-type(1) th:nth-of-type(4) {display: none;} </style> </header> <div id="target"> <header> I think the order of our "coding" effects Caspio's code builder and found this procedure works to keep the above column hiding code working: 1) In Advanced tab, uncheck the HTML editor 2) In Standard tab, "cut" the above code from the header if it is already there 3) In Advanced tab, check the HTML editor 4) In Standard tab, do whatever changes you want to the text in the header 5) In Advanced tab, uncheck the HTML editor 6) In Standard tab, "paste" the above header code in the very top of the page 7) "Finish" Quote Link to post Share on other sites
Recommended Posts
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.