-
AuthorPosts
-
February 25, 2018 at 10:33 pm #917601
Hi,
I am writing on a blog post, in which I have to use many tables.
I prepared the tables already in “google sheets”.When I copy&paste now the tables into wordpress, the table style of the theme is used.
(alternating background and text color, see the link in the private content).I simply want the first-row to be with grey background and the other rows/cells below with white background.
The text should be black (see this screenshot from google sheets, to see what I mean).How can I overwrite the theme CSS for tables to achive the desired style?
- This topic was modified 6 years, 10 months ago by catchbudapest.
February 26, 2018 at 5:11 am #917664Hey catchbudapest,
Please try the following in Quick CSS under Enfold->General Styling:
.main_color tr:nth-child(odd) { background:#fff !important; }
Best regards,
RikardFebruary 26, 2018 at 10:54 pm #918069Thanks Rikard!
I got it now, with “(odd)” and “(even)” and “th” I can style the table according to my needs.
BR
February 26, 2018 at 11:16 pm #918075Hi,
Great! I’m glad Rikard was able to help with this situation. Did you need further help, or shall we close this topic?
Best regards,
Jordan ShannonFebruary 26, 2018 at 11:59 pm #918100Hi,
I just realized that my tables are not responsive for mobile devices (on very small screens a part is cut off).
Is there a simple trick to make the tables responsive? (it would be enough if it can be scrolled on very small screens)
I already tried to add:
<table style="width:100%; overflow: scroll;">
But unfortunately that didn’t really work.
February 27, 2018 at 12:11 am #918105Hi,
Unfortunately tables are not able to be made full responsive on mobile. What you could possible do is create a “mobile only” div or section that would feature a more mobile friendly data presentation.
Best regards,
Jordan ShannonFebruary 27, 2018 at 11:20 am #918364Hi,
do you have something like this in mind:
<div style="overflow-x:auto;"> <table> ... </table> </div>
Seems to work after a quick check.
Do you see any problems with this approach?February 27, 2018 at 1:18 pm #918427Hi,
Yes, though it would seem good since you will still have that table layout but you need to scroll horizontally to see all of it. What I usually suggest is to create 2 tables, 1 for desktop and tablets and 1 for mobile, use Screen Settings to hide/show tables.
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.