Hi,
thanks for your post, and sorry for the trouble.
Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Regards,
Tobias
[Ignore this comment – I just want to receive notifications from this thread]
Hi,
I just tested this on my dev site, and I think I see what you mean now. The problem basically is, that the CSS for the responsiveness changes the display mode of the table cell, so that its internal structure (of being a table cell) is lost. Due to that, the connection to the other cells is lost, and therefore colspanning or rowspanning don’t work anymore. (The browser can’t interpret those anymore.)
Unfortunately, I’m not aware of a solution to this, so that the only good fix probably is to not use the flipping for tables with combined cells, but only horizontal scrolling. That’s possible with this code: https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954
Regards,
Tobias
Thread Starter
Sieve
(@sieve)
Hi,
Thanks for the work around it is just what we wanted.
Now we have got the headers scrolling too is there anyway we can extend them so that they fit onto one line instead of doubling up.
http://www.stormport.co.uk/planned-power-cuts/
Many Thanks
Hi,
yes, that should be possible. For that, please try adding this “Custom CSS”:
.tablepress-scroll-wrapper .tablepress thead th {
white-space: nowrap;
}
Regards,
Tobias
Thread Starter
Sieve
(@sieve)
Thanks for all your help the table works and looks great.
Great plugin and Great support,
Many Thanks,
Sieve.
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Hi
I have a partial solution to this using the css, below. The only stumbling block is that a JavaScript error is thrown by jquery.datatables.min.js?ver=1.5.1:58
Uncaught TypeError: Cannot read property ‘style’ of undefined
I think this error is caused by the fact that the rendering of colspans means that there are less dom elements available when the responsive layout is triggered (hence undefined).
Anyhow, the css I am using to correct the colspan height once in responsive layout mode (ie, once the header cells are down the left-hand side), goes something like this…
/* TABLET */
@media (max-width: 979px) {
.tablepress.tablepress-responsive-tablet {
th[colspan="2"], td[colspan="2"] {
height: 78px; // adjust accordingly
}
th[colspan="3"], td[colspan="3"] {
height: ...
}
}
}
/* same for other media queries and their .tablepress.tablepress-responsive-* classes */
I think if that js error can be resolved, things will be better (the error may be preventing some of the other functionality from working, such as pagination etc).
Thanks!
Hi njs,
thanks for your post, and sorry for the trouble.
Your observation is correct. The DataTables JS library does not support tables with colspan or rowspan and throws an error like the one you mention.
If you want to use colspan in that table, you can not use DataTables at the same time. Sorry 🙁
Regards,
Tobias
OK.Shame – so close! I think a small tweak to the DataTables JS would sort it (eg check if element exists before getting/setting its style).
Thanks though 🙂
Hi,
from what I know, the DataTables JS library requires a full rectangular table so that it will always be able to re-order cells.
But as I’m not the developer of the DataTables JS library, this is not something that I can influence 🙁
Best wishes,
Tobias
No worries. If I think of something, I’ll share it. Thanks!
