How to remove gap at top of table?

  • Resolved orcky723

    (@orcky723)


    5 years, 3 months ago

    Hi,

    First off, fantastic plugin.

    You can see the gap I am talking about in this screenshot.

    I am adding the shortcode to an elementor widget. This not on the elementor side because there is no gap if I add text (or a table using their widget). E.g.

    This is my custom CSS on the “Plugin Options” page:

    .tablepress {
    border-collapse: collapse;
    border: 2px solid #1063ab;
    }
    .tablepress tbody td {
    vertical-align: middle;
    text-align: center;
    }
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #1063ab;
    color: #ffffff;
    border-bottom: none;
    vertical-align: middle;
    text-align: center;
    }
    .tablepress .odd td {
    background-color: #ebf3fa;
    color: #9e9e9e;
    }
    .tablepress .even td {
    background-color: #ffffff;
    color: #9e9e9e;
    }

    I’m not sure what is adding the gap, or how I can remove it. So any useful suggestions are appreciated. Thanks in Advance.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Just from the screenshot, I can not find out where this is coming from. Thanks!

    Regards,
    Tobias

    Thread Starter orcky723

    (@orcky723)

    Hi Tobias,

    Thanks for getting in touch.

    I’ve added a test page with an exact copy of one my widgets. It’s an accordian widget with the TablePress shortcode inside. You can see for “premierships and championships” there is a gap top and bottom between the table and the titles.

    https://www.anufc.org.au/admin/

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for the link! From what I can see, the problem is that the Shortcode for the table (or rather its HTML output) is wrapped in HTML <p> and </p> tags. These cause the space. The best solution would be to find out how to remove these.

    Another (hacky) trick could be to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .oew-accordion-content .tablepress {
	margin: -21px 0;
}

    Regards,
    Tobias

    Thread Starter orcky723

    (@orcky723)

    Thanks Tobias! That makes a lot of sense. So I added the following code to the elementor widget’s additional CCS field:

    p { 
display: inline; 
}

    If you have a look again, the top border is now gone, but the bottom border remains. I have tried a variation of that code above, like adding inline-block, !important, margin: 0, padding: 0 etc.

    The other (hacky) solution you suggested, I thought of originally, but it is not responsive, which is a requirement for this website.

    Thread Starter orcky723

    (@orcky723)

    Update:

    In addition to the inline code above, I added the following to TablePress’ custom CSS field and it solved the issue!

    .oew-accordion-content .tablepress {
	margin-bottom: 0;
}

    Thank you so much for your help Tobias!!!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    nice! That’s a good solution as well ??

    Best wishes,
    Tobias

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to remove gap at top of table?’ is closed to new replies.