Hiding one column based on size of the screen

Hi,

thanks for your post, and sorry for the trouble.

Yes, something like this is possible with CSS3 Media Queries in your “Custom CSS”, similar to

@media (max-width: 1024px) {
  .tablepress-id-123 .column-10 {
    display: none;
  }
}

Regards,
Tobias

Hi Tobias,

Thanks for your help, it works!
But I still have a small issue, the header of my columns still display the 10th column header, in this case “Disponible en assurance vie” see here: https://www.althos-patrimoine.com/comparateur-de-scpi-offres/

How can we remove it as well?

Thanks

Hi,

I think that that is caused by the Horizontal Scrolling. Can you please try again after turning that off?

Regards,
Tobias

Hi,

I turned it off but it is still not working.

Thanks,

Hi,

ah, now I see. You modified the CSS code by adding an extra td (this results in just the body cells to be hidden).

Please change

.tablepress td.column-10 {

to

.tablepress-id-123 .column-10 {

(with the correct table ID, otherwise this would hide column 10 from all tables).

Additionally, please remove the comma at the end of

.tablepress-id-4 .column-6,

in the block above, as there must not be a comma right before the {.

Regards,
Tobias

Great, that works!

Thanks Tobias you rock!

Let’s say I want also to modify it for smaller screen, can I add such a code?

@media (max-width: 768px) {

.tablepress-id-4 .column-10,
.tablepress-id-4 .column-9,
.tablepress-id-4 .column-8,
.tablepress-id-4 .column-7,
{
display: none;
}

}

Thanks,

Hi,

yes, that will work fine, but remember to not add a comma right before the {!

Regards,
Tobias

Thanks Tobias!

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!