HIDE / SHOW TABLE

Hi,

thanks for your post, and sorry for the trouble.

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 Tobias,

Thank you for your reply!

Find attached the example:
https://www.privassur.com/fr/particulier/

Regards

Hi,

ok, thanks for the link! Now I see what you mean!

My suggestion here would be to apply an “Extra CSS class” to tables, via the Shortcode, which you can then use in the CSS styling.
For example, you can extend the Shortcode

[table id=21 hide_rows="8,9,10,11,12" /]

to

[table id=21 hide_rows="8,9,10,11,12" extra_css_classes="tablepress-id-21-main" /]

(The appended main is just an example, it could be any word that describes what this filtered table means for you.)
Then, you can use that “Extra CSS class” in your CSS. So, instead of using

.tablepress-id-21 .row-2 {
  ...
}

you can then use

.tablepress-id-21-main .row-2 {
  ...
}

and that block of CSS will then only be applied to the table which has that particular “Extra CSS class” in its Shortcode.

For the other table, i.e. the one with hide_rows="1,2,3,4,5,6,7", you could use e.g. extra_css_classes="tablepress-id-21-second" (where again, second is just an example word).

Does this make sense?

Regards,
Tobias

Thank you Tobias, It is very clear ! I will try for it

Just 3 questions that I didn’t find a solution :

-Is there a code to cancel the hoover highlights only on one row (the first one for exemple)?
-What is the code to create a transparent margin between columns 3,4,5 ?
I tried to create a merged column between my content columns and set the width to 1px but it was too large (in the exemple there is no background color of my products columns but I would like to have 3 different background color and have a small margin between them)
– Is there a CSS code to highlight the columns 3,4,5 and change the font color when hoover it and fix the highlight if we click on a specific cell (for exemple a checkbox in the cell)?
I tried few week ago to adapt this tuto with no luck…
https://tablepress.org/faq/highlight-cells-or-content/

Thank you again Tobias and as every time you help me I am happy to make a donation for your time and your plugin.

Best

Hi,

good to hear that this helped!

1) For this, you’ll basically have to set the hover color for that row to white:

.tablepress-id-21-main .row-hover .row-1:hover td {
    background-color: #ffffff;
}

2) What exactly do you mean with? Do you mean that you don’t want the blue bottom borders to how as a solid line? For that, you could try setting a different table border mode:

.tablepress-id-21-main {
    border-collapse: separate;
    border-spacing: 10px 0;
}

In addition, you will have to apply the borders to the cells and not the row, i.e. replace

.tablepress-id-21-main .row-3 {
    border-bottom: 3px solid #00008b!important;
    border-top: 3px solid #00008b!important;
}

with

.tablepress-id-21-main .row-3 td {
    border-bottom: 3px solid #00008b!important;
    border-top: 3px solid #00008b!important;
}

3) Unfortunately, I don’t know an easy solution in CSS code to that. The problem here is that tables in HTML are laid out in rows, so that a cell does not know about other cells in the same column. For this, you would therefore need custom JavaScript code.

Regards,
Tobias

Thank you Tobias for your time and help.

Donation made !

Best !

Hi,

thanks a lot for that, I really appreciate it!

Best wishes,
Tobias