[Support request] Responsive table mobile

[Roy]

Hi,
There is an option to fix the table on this page?

On mobile, the page width is bigger than the display…
Can you please assist with a css that could fix it?

Thanks

[Leo]

Hi there,

Unfortunately responsive tables are very difficult to achieve and best leave to a plugin.

Give these a shot:
https://en-ca.wordpress.org/plugins/magic-liquidizer-responsive-table/
https://en-ca.wordpress.org/plugins/tablepress/ (premium version has responsive tables)

Or Google responsive table to see more options.

[Onur]

I really need it. Please check here: https://www.swtestacademy.com/test-attributes-annotations/

[David]

Hi there,

the only simple solution we can provide is to make the table scrollable.
Add the Table inside a Group Block. With the Group Block selected go to Advanced > Additional CSS Class(es) and add: table-container

Then add this CSS to your site:

.table-container > div {
    padding: 0 !important;
    max-width: 100%;
    overflow-x: scroll;
}

If you need anything different you will need to use a plugin like Leo suggested.

[Onur]

Thanks David. I have already applied below one and have come to update the post. 🙂 Below CSS works well for mobile-related table issues.

@media (max-width: 600px) {
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
display: block;
overflow-x: auto;
white-space: nowrap;
width: 100% !important;
}
}

[David]

Glad to hear you found a solution!

[Onur]

I reduced the CSS a bit and make it like below:

Anyone who has this kinda problem can try below CSS.

@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
width: 100% !important;
}
}

[David]

Thanks again!

[Umoette]

This code helped me. Thank you @Onur

[Onur]

Welcome @Umoette. Happy to help.

[Author]

Posts