Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 25, 2018 at 10:33 pm #917601
    catchbudapest

    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, 9 months ago by catchbudapest.
    February 26, 2018 at 5:11 am #917664
    Rikard

    Hey catchbudapest,

    Please try the following in Quick CSS under Enfold->General Styling:

    .main_color tr:nth-child(odd) {
  background:#fff !important;
}

    Best regards,
    Rikard

    February 26, 2018 at 10:54 pm #918069
    catchbudapest

    Thanks 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 #918075
    Jordan Shannon

    Hi,

    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 Shannon

    February 26, 2018 at 11:59 pm #918100
    catchbudapest

    Hi,

    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 #918105
    Jordan Shannon

    Hi,

    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 Shannon

    February 27, 2018 at 11:20 am #918364
    catchbudapest

    Hi,

    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 #918427
    Nikko

    Hi,

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.