Tables

visionsys · June 2020

Hello,

I have writen a CSS code to style my table but when I paste it in the website it takes some of the CSS properties.

Please tell me how to remove ALL of the stylings from Betheme for a particular item - in this case tables.

Please note that I'm using the Column element from the builder and the HTML inside is custom as well.

I need the solution to be permanent.

Pablo · June 2020

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

visionsys · June 2020

Hello,

I don't understand why do you need a link when the question is regarding a global style, but here is the webpage - https://support.visionsystems.bg/test1/

I need to remove ALL of the styles generated by the theme for the table and visualize only thos added by me.

In example - The green background for the <tr>s when I hover over them

Pablo · June 2020

You will not be able to disable styling for certain element, it's all stored in single css file so you would have to remove it from theme files code.

If you do not want to touch the theme files, you have to overwrite every css rule one by one.

Thanks

visionsys · June 2020

Alright, can you tell me how to overwrite the rules, responsible for the following things:

1. Table row mouseover background going green - I don't need it to change whatsoever
2. Text in tbody's tds not being vertically centered

3. Also I've set the table heading to be static. It does not appear to be like that in the website.

4. Also I've set colors for the background of my thead and tfoot but they appear white

Pablo · June 2020

Well, you have to use a huge amount of CSS code, I'll help you with few of them - because some of them require really advanced code which we do not provide here.

Please paste that CSS code into Theme Options > Custom CSS & JS > CSS

1)

body.table-hover:not(.woocommerce-page) table tr:hover td{background: transparent !important;}

2)

It's vertically centered, there is a rule for that applied:

https://prnt.sc/t1wzg9

3) What do you mean by static, can you explain?

4) You mean that background behind the main texts on the top?

Thanks

visionsys · June 2020

1. Works excellent - thank you!
2. The rule is applied but on mobile it doesn't look centered. - https://imgur.com/a/Y6dH9Hu

3. By static I mean that the header of the table (or <thead>) should be scrolling down as a customer scrolls the page. Basically the same as the website header, but for the table. It's working on my local machine but when I deploy it to the website it doesn't.

4. I mean the white background on the <thead> and <tfoot> sections. In the code I've set the background to be the same as the webpage> Again, on my local machine it is working but on the website it gets overwritten, probably by a class from the theme. - https://imgur.com/a/7REViKC

I've moved the content to a new webpage - https://support.visionsystems.bg/sravnete-planovete/

Pablo · June 2020

2) Well, it cannot be centered because of the images, you would have to use the margin-top or top value in inline css code of that span.

3) It will not work, this element is not made for this kind of purposes, sorry.

4) Please use this CSS code:

table.plans thead th{
	background:red !important;
}

Thanks

visionsys · June 2020

Thank you Pablo. I think this just covers everything up.

Tables

Comments