Table Margins with Use DataTables

  • Resolved Mark Hillyer

    (@markhillyer)


    4 years, 3 months ago

    I use margins in the custom CSS to position my tables. For example:

    .lifeevents {
    width: 972px;
    margin-bottom: 0;
    margin-left: 18px;
    }

    This works well for all of my tables. However, when I switch on “Use DataTables” for a table the margin settings are overridden. The rest of the formatting within the table is ok.

    Is there a DataTables custom command that can correct this?

    Also is there a way to have the DataTables filter on the left rather than on the right?

    Many thanks, Mark.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 3 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    To set the width and margins on a table that uses DataTables, I recommend setting those on the table’s DataTables <div> wrapper, like

    #tablepres-123_wrapper {
  width: 972px;
  margin-bottom: 0;
  margin-left: 18px;
}

    where 123 is the table ID.

    I couldn’t really test this with your example, as nothing on the page from your link has the CSS class .liveevents.

    Regards,
    Tobias

    Thread Starter Mark Hillyer

    (@markhillyer)

    4 years, 3 months ago

    Many thanks for your help, Tobias.

    Sorry, that page uses the class .people

    I added this and it works!

    #tablepress-people_wrapper {
    width: 1302px;
    margin-bottom: 0;
    margin-left: 18px;
    }

    I also have pages that have two or more reads of the same table. For example https://www.goldencolony.info/bluebook_p1841/

    The wrapper works for the first occurrence but not the second, etc.

    CSS
    #tablepress-bluebook_pp_wrapper {
    width: 1302px;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 18px;
    }

    HTML
    <h2>Police Magistrates</h2>
    <div class=”para”>Text placeholder.</div>
    [table id=bluebook_pp filter=”P1841pm” filter_columns=”1″ responsive=scroll /]
    <h2>Commissioners of Crown Lands</h2>
    <div class=”para”>Text placeholder.</div>
    [table id=bluebook_pp filter=”P1841ccl” filter_columns=”1″ responsive=scroll /]

    If there are two different tables with different CSS wrappers, it works on the first occurrence of each table.

    Many thanks,
    Mark

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 3 months ago

    Hi,

    good to hear that this helped!
    To make this work for multiple occurrences of a table on a page, you’d just have to extend the CSS code a bit:

    #tablepress-bluebook_pp_wrapper,
#tablepress-bluebook_pp-no-2_wrapper {
  width: 1302px;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 18px;
}

    Essentially, as the HTML IDs have to be unique across the page, the other occurrences of the same table ID get an -no-X inserted in their HTML ID, were X is the number of the occurrence.

    Regards,
    Tobias

    Thread Starter Mark Hillyer

    (@markhillyer)

    4 years, 3 months ago

    Excellent! Works well.

    Many thanks,
    Mark

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 3 months ago

    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 5 replies - 1 through 5 (of 5 total)

The topic ‘Table Margins with Use DataTables’ is closed to new replies.