please provide links to pages on your site where I can see the table both in a tab, and not in a tab
It looks like you are using Chris Coyier’s ‘Simple CSS-Only Row and Column Highlighting’ technique outlined at: https://css-tricks.com/simple-css-row-column-highlighting/
A limitation of this technique is mentioned on that page:
The negative z-index keeps it below the content. Negative z-index is a fun trick, but beware this table then can’t be nested within other elements with backgrounds, otherwise the highlight will go below them.
As a workaround you should remove the background from the tab content div. This can be done by adding the following CSS rule in a child theme or using a custom CSS plugin:
.responsive-tabs__panel.responsive-tabs__panel--active {
background: none!important;
}
Alternatively, the solution mentioned in the comments on the CSS Tricks page may help – adding the following to your table styles:
table {
overflow: hidden;
position: relative;
z-index: 0;
}
I added both codes to the global and local css but this did not change anything.
http://ch1.2biz.ca/test/
Can you suggest anything else that could help the plugin work with any css solution row/column highlight?
What do you mean by ‘global’ and ‘local’ css? These are not standard terms in WordPress.
By global, I mean external declaration via Custom CSS plugin.
By local, I mean internal declaration defined in the head section (added directly in the page source code via WP page edit).
I mean that this code:
.responsive-tabs__panel.responsive-tabs__panel–active {
background: none!important;
}
table {
overflow: hidden;
position: relative;
z-index: 0;
}
is added to the Custom CSS and just in case also added to the page itself.
view-source:http://ch1.2biz.ca/test/
You only need to add one of the suggested snippets once.
The cleanest method is one that adds the CSS rule to the table using the class you are assigning to the tables you want to target. That method fixes the problem inherent in the original table highlighting code rather than adding a workaround to the tab content.
When viewing the embedded CSS in your source, I can see that this block is present, but it is ignored by the browser as it is invalid CSS due to the paragraph tags you have around it:
<p>.actuators-electric {
overflow: hidden;
position: relative;
z-index: 0;
}</p>
Remove all of the CSS snippets you have added for this and then just add the block again, but without any superfluous markup:
.actuators-electric {
overflow: hidden;
position: relative;
z-index: 0;
}
I’m glad this has fixed the issue for you.
If you are happy with the tabby responsive tabs plugin, and the free support, I would appreciate a nice review of the plugin at https://ww.wp.xz.cn/support/view/plugin-reviews/tabby-responsive-tabs
I just did it. A good support is what makes the plugin great 🙂
