Responsive Table error

I also tried the shortcode [table id=(insert id here) responsive=collapse /]

I think I have narrowed it down to those tables that contain a lot of information in one of the columns. For some reason this causes the JavaScript features not to function, including the horizontal scrolling, the table information display, etc.
Is there any way to fix this, since I do not have control over how much data gets put into a column?

Thank you

Hi,

thanks for your post, and sorry for the trouble.

Most likely it’s not the amount of information, but some invalid HTML code, for example.
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

Hi @tobiasbg

Thank you for getting back to me. One of the pages can be accessed here . Should I send you all of the pages with this problem? Like I said, some of the tables collapse as instructed, while others don’t.
I truly appreciate your assistance!

Warm regards
SADOCS

Hi,

thanks for the link! That helps already.
There are two issues here:

First, two of the tables on this page only have one row. Unfortunately, this means that the JavaScript features (including the collapse mode) can not be used with these tables. The external JavaScript library that is used for these features requires a table with at least one header and one body row.
For these two tables, that’s not the case, so that a JavaScript error happens, which then results in the browser stopping the execution of JavaScript entirely.
So, you’d have to make sure to only use the JS features on tables with at least two rows.

The second issue is more about the layout: As your tables are hidden inside expandable section, this means that the JS library will not be able to make certain calculations (like columns widths, etc.) when the page is loaded. Due to that, the column widths will seem off, between the body and header cells. Unfortunately, this will likely mean that you won’t be able to show the tables in these expandable sections.

Regards,
Tobias

Hi

Thank you very much, this is very helpful!
Just to clarify, when you say expandable section you mean the toggle or drop-down feature that views the table when clicked?

Regards
SADOCS

Hi,

yes, that’s what I meant.

Regards,
Tobias

Hi @tobiasbg

I changed the page so that the tables are not contained in an expandable section. Instead, I just posted them directly as a shortcode. However, it still does not want to collapse.
I’m not concerned with the tables that do not have information yet, I just want to make sure that when they do start to contain information, the table will collapse so that the information can be read.

Regards
SADOCS

Hi,

for me, the first table is collapsed. For the others, the problem is this (quoted from my reply above:

First, two of the tables on this page only have one row. Unfortunately, this means that the JavaScript features (including the collapse mode) can not be used with these tables. The external JavaScript library that is used for these features requires a table with at least one header and one body row.
For these two tables, that’s not the case, so that a JavaScript error happens, which then results in the browser stopping the execution of JavaScript entirely.
So, you’d have to make sure to only use the JS features on tables with at least two rows.

The table will be be collapsable, once the tables have at least two rows.

Regards,
Tobias

Yes the first table collapses, and I know that those with only one row do not collapse (since the one row is the header). That’s ok, because as you said, they will hopefully collapse once more information has been put in.

However, if you check the 4th and 5th tables, they contain 2 rows but still don’t collapse, meaning that there must be some other error?

You can see what I mean on another post with the same initial URL but permalink /?p=4250.
Here you will see one table with 2 rows (header and another row) that collapses accurately, but right after that there is a table with the same amount of information that does not collapse.

I really appreciate your assistance!

Hi,

However, if you check the 4th and 5th tables, they contain 2 rows but still don’t collapse, meaning that there must be some other error?

No, this is caused by the tables with one row. Due to that, a JavaScript error happens, which then results in the browser stopping the execution of JavaScript entirely. Thus, the following tables also don’t get the collapse feature.

On the 4250 page, it’s the same. The third table only has one row, so that that one and all following tables don’t get the collapse feature, due to the JavaScript error.

Sorry for not having having described that properly in my previous two replies.

Regards,
Tobias

Aaaaah, ok I see now. Thanks for clarifying that for me! And thank you for the assistance, it’s really appreciated.

Have a great day!

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!