Responsive tables

Hi,

thanks for your question, and sorry for the trouble.

Can you please post a link to the page with the table, so that I can take a direct look? I should then be able to find a CSS fix. Thanks!

Regards,
Tobias

Thanks-I also noticed that the horizontal scrolling is not working when i do responsive “phone”, it moves the first row of data to the right of the headers but then subsequent data is just stacked underneath when i view on my iphone. When I shrink my browser window the scrolling works-just not on the phone. I did make some style changes-see below and the link is :

https://newgrowthplanners.com/M-SAMC_Evaluation/participants/program-data/pellissippi/

Stylesheet changes:

@media screen
and (max-width: 767px) {
.tablepress-responsive-phone tbody{white-space:normal!important}

.tablepress-responsive-phone thead{width:45%!important;}
.tablepress-responsive-phone thead th{
border-bottom-width: 1px!important;
border-bottom-style: solid!important;
border-bottom-color: #CCC!important;
}

}

Thanks-Caroline

Hi Caroline,

sorry, I don’t have an iPhone to test ?? In the browser (when shrinking the window), the scrolling works fine. There’s just some glitches with the cell height, which (to some extent) comes from the fact that you are using “colspan” in the table, and from the fact that the cell heights differ due to their content. It should however be possible to fix that by setting a fixed height on the cells inside that media query.

Regards,
Tobias