Responsive style

Hi,

thanks for your post, and sorry for the trouble.

For this, you could use a CSS3 Media Query in your “Custom CSS”, like this:

@media (max-width: 979px) {
  .tablepress-id-123 .column-3,
  .tablepress-id-123 .column-4 {
    display: none;
  }
}

The breakpoint (979px), table ID and columns numbers need to be adjusted as desired.

Regards,
Tobias

i’ve written the code that you indicated on defaul.css file like – but i didn’t helped. im i editing right css file?

@media (max-width: 760px) {
.tablepress-id-1 .column-1,{
display: none;
}
}

Hi,

please don’t edit any of the plugin’s file directly! You will lose those modifications when the plugin is updated!
Instead, please just paste the CSS code into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Your modified code is not working, because it contains a small error: You will also have to remove the comma after the .column-1 part. (The comma must be there if there are multiple columns that you want to hide, but there must not be one right before the {.)

Regards,
Tobias

Sorry bothering you with my stupid questions, but i really need help on this issue.

I’ve done as you said,but it still not working . after activating responsive style ( [table id=1 responsive=”phone” datatables_columnfilter=”true” /]
) the table not showing anything. i’ve write the code on the Plugin Options.

here is the link https://topmedia.az/?p=2020

Hi,

using both the responsive="phone" parameter and the extra “Custom CSS”, together with the Columnfilter doesn’t make sense.
I suggest to remove that parameter again.

Regards,
Tobias

I think problem here is that, table shown not horizontally but vertically (reverse of how it’s originally for desktops).
Is there any way to control that? On you website i didn’t find that.

Hi,

that’s what the responsive="phone" parameter does, as explained on the Responsive Tables Extension webpage. So, just remove that parameter and the hiding of column 1 on small screens should work fine.

Regards,
Tobias

I removed responsive code .on Plugin Option i write this one
@media (max-width: 300px) {

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4 {
display: none;
}

}

It does not hide the marked tables. what i’m doing wrong? i tried 300px,500,760. but that also didn’t worked.

Hi,

that CSS is working (and I suggest to use 760px). However, now your theme is interfering. It also contains a feature for responsive tables, which you’ll have to turn off. For that, please comment out or remove the JS code

// Responsive tables
        jQuery('article section table').each(function (i, table) {
            table = jQuery(table);

            if (table.hasClass('hosting')) {
                var heads = table.find('thead th:not(:first-child)');
            } else {
                var heads = table.find('thead th');
            }
            var cells = table.find('tbody td');
            var heads_amount = heads.length;
            // if there are the thead cells
            if (heads_amount) {
                var cells_len = cells.length;
                for (var j = 0; j < cells_len; j++) {
                    var head_content = jQuery(heads.get(j % heads_amount)).text();
                    jQuery(cells.get(j)).html('<span class="gk-table-label">' + head_content + '</span>' + jQuery(cells.get(j)).html());
                }
            }
        });

in the theme’s “/js/gk.scripts.js” file.

Regards,
Tobias

i deleted that script from theme files,but it didn’t helped.

I don’t why Caption of column is shown in each row. the only problem is that.
https://topmedia.az/files/photo.PNG

Hi,

when I view the page, everything is ok. You might just have to clear the browser cache or reload the page.

Regards,
Tobias

bro,just wait for the page load ??

i checked it in 3 mobile phone and in 1 tablet.

Hi,

I just checked again, and when I reduce the width of the browser window (Google Chrome), everything works fine for me.

Regards,
Tobias

Thank you so much! You are right. now it works.