I'm trying to style a table on the site to only have horizontal lines, but I can't seem to get rid of the vertical lines in between cells. I've used the following css to achieve what is currently visible:
The last two entries are to match the vertical border lines to the background colour and render them invisible (none !important;) didn't seem to work.
Also, when I test this page on Chrome, the bottom line doesn't show as a 2px black line, but only shows the thin border lines (like the vertical ones between cells I'm trying to get rid of).
Can you help me rectify this issue (thin vertical lines between cells and the black bottom line not showing on Chrome).
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi,
I'm trying to style a table on the site to only have horizontal lines, but I can't seem to get rid of the vertical lines in between cells. I've used the following css to achieve what is currently visible:
tr, table {
background: none !important;
border-bottom: 2px solid #000000;
border-top: none !important;
border-right: 1.5px solid #DEF5FF;
border-left: 1.5px solid #DEF5FF;
}
The last two entries are to match the vertical border lines to the background colour and render them invisible (none !important;) didn't seem to work.
Also, when I test this page on Chrome, the bottom line doesn't show as a 2px black line, but only shows the thin border lines (like the vertical ones between cells I'm trying to get rid of).
Can you help me rectify this issue (thin vertical lines between cells and the black bottom line not showing on Chrome).
Thank you.
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body:not(.woocommerce-cart) .main-content tr * { border: none !important; }Thanks
ThemeNectar Support Team
Thanks a lot, this worked like a charm.