Title: Colspan on responsive table Last modified: August 22, 2016 --- # Colspan on responsive table * Resolved [Sieve](https://wordpress.org/support/users/sieve/) * (@sieve) * [11 years, 4 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/) * Hi, * Great Plugin extremely helpful. One problem which has just occurred is that the colspan on the tables when in the mobile view it shows in one cell and stretches the table and doesn’t span down all the fields. Is there a way around this? * Many Thanks * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 13 replies - 1 through 13 (of 13 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 4 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776667) * 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 * [rogerbooyou](https://wordpress.org/support/users/rogerbooyou/) * (@rogerbooyou) * [11 years, 4 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776748) * [Ignore this comment – I just want to receive notifications from this thread] * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 3 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776791) * 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](https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954) * Regards, Tobias * Thread Starter [Sieve](https://wordpress.org/support/users/sieve/) * (@sieve) * [11 years, 3 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776800) * 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/ ](http://www.stormport.co.uk/planned-power-cuts/) * Many Thanks * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 3 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776803) * 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](https://wordpress.org/support/users/sieve/) * (@sieve) * [11 years, 3 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776814) * Thanks for all your help the table works and looks great. Great plugin and Great support, Many Thanks, Sieve. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 3 months ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5776815) * 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](http://wordpress.org/support/view/plugin-reviews/tablepress) here in the plugin directory. Thanks! * [njs](https://wordpress.org/support/users/njs/) * (@njs) * [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777033) * 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! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777034) * 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 * [njs](https://wordpress.org/support/users/njs/) * (@njs) * [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777045) * 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 🙂 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777046) * 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 * [njs](https://wordpress.org/support/users/njs/) * (@njs) * [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777047) * No worries. If I think of something, I’ll share it. Thanks! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777048) * Hi, * great! Thanks for that! * Best wishes, Tobias Viewing 13 replies - 1 through 13 (of 13 total) The topic ‘Colspan on responsive table’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 13 replies * 4 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/colspan-on-responsive-table/#post-5777048) * Status: resolved