Pivot Table rows collapses on mobile

[CTW2020]

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.

<style>
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;
}
</style>

****************

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 your help with this.

[Nuke354]

You can try using an Iframe or force the page to be rendered as desktop: https://stackoverflow.com/questions/36030080/how-to-make-a-responsive-website-render-the-desktop-version-on-a-mobile