Table center not working

  • Resolved Aeon Horus

    (@aeonhorus)


    9 years ago

    Hi

    I am currently building a website for myself and I am using “Themify Ultra” theme.
    I have installed your plugin “Tablepress” as I want to have tables in my pages and I have found it to be a great piece of software and relatively easy to style using CSS and your instructions for the things that I have done so far are great ??

    However!

    When I come to try centre the table on my page it is constantly being pulled to the left….?

    .tablepress-id-N {
    width: auto;
    margin: 0 auto 1em;
    }

    This doesn’t work.
    When my page loads it jumps to the centre but then it seems to be pulled to the left and will never centre.

    I have checked everywhere in the theme but can’t seem to find anything that would conflict with it.

    I would also like to have the table at a specific size too like

    .tablepress-id-N {
    width: 800px;
    margin: 0 auto 1em;
    }

    But this will not work either.
    Please I have been tearing my hair out for two days with this now.

    I can’t even find where I could maybe add some padding to the page. I am a novice so it is probably me that has missed something.

    So please…
    Can you help?

    Here is the total CSS from the Plugin Options Custom CSS that I have added.

    …………………………………………………..

    .tablepress-table-name {
    color: #800517;
    text-align: center;
    }

    .tablepress-id-thoth_wands thead th,
    .tablepress-id-thoth_wands tfoot th {
    background-color: #800517;
    font-family: Shanti;
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    line-height: 22px;
    color: #FDEEF4;
    }

    .tablepress,
    td,
    th {
    border: 1px solid black;
    border-collapse: collapse;
    }

    .tablepress {
    width: 800px;
    margin: 0 auto 1em;
    }

    .tablepress-id-thoth_wands .odd td {
    background-color: #990012;
    font-family: Shanti;
    font-size: 22px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 22px;
    color: #FDEEF4;
    }

    .tablepress-id-thoth_wands .even td {
    background-color: #F70D1A;
    font-family: Shanti;
    font-size: 22px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 22px;
    color: #FDEEF4;
    }

    .tablepress-id-thoth_wands .row-hover tr:hover td {
    background-color: #C24641;
    }

    ……………………………………………………

    Thanx in advance
    Aeon

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

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

    (@tobiasbg)

    Hi,

    thanks for your question, 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? Thanks!

    Regards,
    Tobias

    Thread Starter Aeon Horus

    (@aeonhorus)

    Yeah man
    LOL sorry I never thought of that ??

    https://www.aeontarot.com/aeons-arcana/

    But here you are.

    You will see as the page loads it centres but then it’s almost like it’s being pulled to the left by some invisible force ??
    This is why I was thinking that maybe it was me who has missed something or if there is a conflict going on between the theme and tablepress.
    But I would have thought that everything within wordpress should be compatible with each other…. right?

    Thankx for answering so quickly too man.
    Very much appreciated

    Aeon

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link!

    The reason for this basically is that you are using the DataTables JS library on this table and that your theme has a content area that is 100% wide. Therefore, we’ll just need a small change in your CSS.
    Please replace

    .tablepress {
    width: 800px;
    margin: 0 auto 1em;
}

    with

    .dataTables_wrapper {
    width: 800px;
    margin: 0 auto 1em;
}

    Regards,
    Tobias

    Thread Starter Aeon Horus

    (@aeonhorus)

    Brilliant ??
    That worked in Chrome
    But not In Firefox nor IE ??

    So I tried using the cross browser coding I was taught….

    .dataTables_wrapper {
    -webkit-width: 800px;
    -moz-width: 800px;
    -o-width: 800px;
    -ms-width: 800px;
    width: 800px;

    -webkit-margin: 0 auto 1em;
    -moz-margin: 0 auto 1em;
    -o-margin: 0 auto 1em;
    -ms-margin: 0 auto 1em;
    margin: 0 auto 1em;
    }

    But the custom CSS wouldn’t accept it?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that’s strange. width and margin are established CSS properties, they don’t have vendor prefixes, which is why those are not working.

    There seems to be some problem with writing the CSS files to the server. Can you please log in via FTP and delete the three CSS files /wp-content/tablepress-***.css? Then, save the “Custom CSS” again.

    Regards,
    Tobias

    Thread Starter Aeon Horus

    (@aeonhorus)

    Sorry but excuse my lack of knowledge here but I don’t really know what this

    “Can you please log in via FTP and delete the three CSS files /wp-content/tablepress-***.css? Then, save the “Custom CSS” again.”

    means…

    Thread Starter Aeon Horus

    (@aeonhorus)

    Hey not to worry ….

    I just used the “Flush Cashe” button and everything is working fine now man…..

    YEYYY!

    Thanx for all your help

    See you in the next problem (hopefully not for a long time)
    Hehehe

    Aeon

    Thread Starter Aeon Horus

    (@aeonhorus)

    Problem Resolved
    Thanks to Tobias ??

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    ah, yes, caching could also influence this ?? Nice catch!

    Best wishes,
    Tobias

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Table center not working’ is closed to new replies.