Center TablePress by ignoring theme CSS margin

  • Resolved eak500

    (@eak500)


    6 years ago

    Hi ToBiasBG,

    I have been using your plug-in for a while. it is a great solution for table in wordpress. However, i encountered the problem trying to center the table on my page. I have searched around the forum and Q&A but i didn’t see the answer.

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter eak500

    (@eak500)

    6 years ago

    My table has many columns and i want the all text to align in single line. therefore it so wide table area. I need the table to make use of full page and still align to the center of the page. I noticed that there is a empty space on the left of the page that should be from theme CSS that the TablePress cannot take over that space. Please help.

    Thread Starter eak500

    (@eak500)

    6 years ago

    This is the custom CSS that i’m using.

    @media screen and (max-width: 767px) {

    .tablepress .column-1 {
    height: 160px !important;
    }

    .tablepress img.aligncenter {
    margin: 0 auto;
    }

    }

    .tablepress .column-1 {
    width: 160px;
    }

    .tablepress .column-2,
    .tablepress .column-4 {
    white-space: nowrap;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #f0f0f0;
    color: #797979;
    font-style: normal;
    }

    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    background-color: #797979;
    color: #f0f0f0;
    }

    .tablepress thead th,
    .tablepress tbody td {
    text-align: center;
    }

    td.column-1,
    td.column-2,
    td.column-3,
    td.column-4,
    td.column-5,
    td.column-6,
    td.column-7,
    td.column-8,
    td.column-9,
    td.column-10,
    td.column-11 {
    vertical-align: middle !important;
    }

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years ago

    Hi,

    thanks for your post, and sorry for the trouble.

    You could maybe try increasing the available width on just that page, with this “Custom CSS”:

    .page-id-2503 .content_wrap {
  width: 90%;
}

    Regards,
    Tobias

    Thread Starter eak500

    (@eak500)

    6 years ago

    Wow…you’re expert. It works nicely. Thanks for a quick reply.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years 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!

    Thread Starter eak500

    (@eak500)

    6 years ago

    I have another 2 issues. Can you help?

    1. On the mobile page, I use flip mode. I have a problem aligning 1st row (which is picture) and 4th row( which is model description and it is usually quite long). The long model description make the column wide, then the 1st row for the photo is not properly align and somehow there is no line between the row at bottom of 1st row.

    2. On the normal computer page, How can I align the whole data in 4th column (which is model) to the “left”, but column header to the center.

    Thanks in advance.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years ago

    Hi,

    1) It looks like you already found the solution by increasing the height of the row? 🙂

    2) For that, please add this:

    .tablepress-id-3 tbody .column-4 {
    text-align: left;
}

    Regards,
    Tobias

    Thread Starter eak500

    (@eak500)

    6 years ago

    Hi Tobias,

    Thanks again for the 2)’s solution.

    Regarding 1) . I found only half solution. Whenever text in row-4(column-4) is long, I will see the ugly row-1 block. please help.
    https://ibb.co/XFvGz65

    Regards,
    Artit

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years ago

    Hi,

    ah, ok, now I see what you mean. To fix that, please add

    width: auto !important

    below the line

    height: 160px !important

    that you already have.

    Regards,
    Tobias

    Thread Starter eak500

    (@eak500)

    6 years ago

    That works flawlessly. Thanks a lot Tobias.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years ago

    Hi,

    great! Thanks for the confirmation!

    Best wishes,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Center TablePress by ignoring theme CSS margin’ is closed to new replies.