Responsive table mobile

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.

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

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.

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;
}
}

Glad to hear you found a solution!

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;
}
}

Thanks again!

This code helped me. Thank you @Onur

Welcome @Umoette. Happy to help.