Jump to content
  • 0

Pivot Table columns displays as rows on mobile.



I have a Pivot Table that looks fine on desktop.  I want to see the same view on mobile.  My understanding of Caspio Pivot tables is that they are not responsive, so I should see the same view on mobile.  When I view it in Caspio preview and reduce the width of the screen, it looks the same as on desktop.

When i view it on an iPhone, each row (which has 5 columns), breaks down and shows each data cell as rows.  So my 5 columns are shown over 5 rows.  See attached screenshots.


I added some HTML to the heading of my pivot table: ( I don't think this is affecting it, because I removed this code and i'm still seeing the same thing)

HTML in Pivot Table.

table[id^="cbTable"] > tbody > tr:nth-child(1) > th:nth-child(1):before {
content: "Visit Number" !important;
width: 100px;
table[id^="cbTable"] > tbody > tr:nth-child(2) > th:nth-child(1):before {
content: "Est. time since \A randomization" !important;
white-space: pre-wrap;
width: 100px;
table[id^="cbTable"] > tbody > tr:nth-child(3) > th:nth-child(1):before {
content: "Length of visit" !important;
width: 100px;


I added some CSS to make the heading line up:

@media screen and (max-width: 780px) {
    .page-id-716 .cbResultSetTable.cbTableDefaultCellspacing, .page-id-716 tr.cbResultSetTableHeader,  .page-id-716 td.cbResultSetData{
        width: 100% !important;
        margin: 0px !important;
        display: table !important;
    .page-id-716 th.cbResultSetLabel.cbResultSetHeaderCell, .page-id-716 th.cbResultSetLabel.cbResultSetHeaderCell::before{
    width: 250px !important;

How can I prevent the 5 columns on my rows from being displayed over 5 rows?

Thanks in advance for any help you can provide.

CH - Schedule Mobile.png

CH Schedule Desktop.png

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Hello @CTW2020,

You are correct,  the responsive feature is not available on Pivot DataPages.

The pivot table may be displayed like this if it is deployed together with other DataPages (especially those where responsive mode enabled) on the same page. 

As a workaround for this, you may try to deploy the DataPage as an iFrame.

Hope this helps!

Link to comment
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.

Answer this question...

×   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.


  • Create New...