When viewing responsive tables on Chrome for iOS 9 (iPhone 5), the display style attribute for td is always set as { display: table-cell }, when I actually want each td to be on a separate line, resembling rows. This issue only occurs on mobile and works fine on all desktop browsers including Chrome. It also looks good on chrome developer tools in various mobile modes as well as on saucelabs mobile phone simulator.
Interestingly, when I save and cache the page, then view it on Chrome for iOS on iPhone, it displays properly with each td on its own line. It seems like wordpress might be causing some interference since the cached version displays correctly while the live version does not. I've spent countless hours trying to resolve this without any success.
Here are the unsuccessful attempts I've made to try and fix the responsiveness of the tables on my iPhone:
- Added at the beginning of the file,
- Added display: block; clear: both; inline at the html-element-tag-level,
- Cleared cache and added javascript to alert the css("display") which still outputs table-cell,
- Added ids for each td and applied 'display: block' through external CSS,
- Implemented a piece of javascript to change all td's 'display' to 'block' ($("td").css("display","block"); ) when a select field is changed - works on cached version but not live,
- Tried using similar approach as 5. above to change display to none, but not to block!
If I remember any other solutions I've attempted, I will update the question accordingly.