Tablepress responsive table row misalignment

  • Resolved Ria C

    (@ria-c)


    9 years, 9 months ago

    Hi,

    Thanks for a great plugin!

    Unfortunately, I seem to have the same issue as some other users in that once I made the table responsive (for all devices), the alignment of the rows against the headings is now not correct. I tried some of the CSS fixes you have already suggested but the misalignment is still present. The theme I am using is the Divi theme from Elegant Themes, & here is the link to the page with the table.

    https://www.staffinholidaycottage.co.uk/prices-availability/

    I’d really appreciate it if you could let me know the CSS I need to add to fix it.

    Thank you,

    Ria.

    https://www.ads-software.com/plugins/tablepress/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Hi Ryan,

    thanks for your post, and sorry for the trouble.

    You are affected by a small HTML problem here. For some reason there are extra <pre> HTML tags around the table Shortcode code on that page, which need to be removed. For that, please go to the “Edit” screen of the page and switch from the “Visual” to the “Text” editor mode. Then, remove the <pre> and </pre> around the table Shortcode, so that it stands by itself on its own line.

    Regards,
    Tobias

    Thread Starter Ria C

    (@ria-c)

    Hi Tobias,

    Many thanks for such a quick reply.

    I have done what you said, & whilst it is much better than it was, it is still not quite aligned correctly. Is there anything else I can do?

    Thank you,

    Ria.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Ria,

    nice! Yes, now we can even out the padding between the cells, which (due to your theme) are different.
    Please add this to the “Custom CSS”:

    .entry-content .tablepress tr td,
.entry-content .tablepress tr th {
  margin-top: 8px;
  margin-bottom: 8px;
}

    Regards,
    Tobias

    Thread Starter Ria C

    (@ria-c)

    Hi Tobias,

    I’ve tried it but it hasn’t quite worked.
    This is the custom CSS I now have for the table. Is the other CSS impacting what you have advised me to do? I only added this because I needed the test colour to be darker.

    .tablepress tbody td {
    font-family: Tahoma;
    font-size: 14px;
    color: #000000;
    }

    .entry-content .tablepress tr td,
    .entry-content .tablepress tr th {
    margin-top: 8px;
    margin-bottom: 8px;
    }

    Is there anything else we can try? If it’s easier, I’m happy to make it responsive just on a tablet & phone, rather than ‘all’.

    Many thanks,

    Ria.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Ria,

    ah, my bad. I wrote margin instead of padding… Please try again with

    .entry-content .tablepress tr td,
.entry-content .tablepress tr th {
  padding-top: 8px;
  padding-bottom: 8px;
}

    Regards,
    Tobias

    Thread Starter Ria C

    (@ria-c)

    Hi Tobias,

    It works!

    Thank you very much for your help, it looks great.

    Regards,

    Ria.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Tablepress responsive table row misalignment’ is closed to new replies.