it looks like the CSS of the tables might be making them too wide to fit the space available. I can’t check the CSS to confirm this however, as the site is using autoptimise to aggregate and minify the styles.
cubecolour,
I disabled autoptimize, could you look again? Thanks!
pro-tip; one can disable autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL 🙂
frank (ao dev)
Thank you for the tip Frank – that is useful to know.
maidsofglory – it looks like there is some inline CSS in the html of the tables: eg the size of the very large headings in the table is defined with:
<span style="font-size: 24pt;" data-mce-style="font-size: 24pt;">
The display issue I can see is that the large font size of the column headings is causing them to be cut off as the width of the tab content element is not wide enough to accomodate them. Decreasing the font size might help prevent them from being cut off.
Hmm… I’m not sure we’re seeing the same thing here? Maybe it’s just me. Take a look here:
View post on imgur.com
The first image is what the first tab (no matter what table is in it) looks like to me when I open.
The second image is what the other tabs look like when I switch over. I lose all the cell height.
Is this what you are talking about?
Thanks again!
no, It didnt look like that for me on firefox 52 macos, or safari IOS on an iPad.
Which browser(s) have you seen the issue in?
What are you using to create the tables?
I’ve now viewed it in Chrome MacOS (Version 57.0.2987.133 (64-bit)) & I can now see the issue. It looks like the height for the rows is being dynamically generated for the tables and is not being calculated correctly for the tables which are not visible on initial page load.
There may be an option to set a minmum height for the rows in whatever you have used to create the tables.
