Shrunken Table in Chrome

  • Resolved LightQuest

    (@lightquest)


    10 years, 9 months ago

    In trying to streamline the custom CSS coding so all tables (columns, rows, text – everything) in my site are centered and as wide as the container it seems I’ve managed to un-center the table itself in Chrome (when viewed in IE it’s fine). Sorry – I’m a novice at CSS… I’m sure it’s something I’ve done. Thanks so much for your help!

    Here’s the page: http://www.insigniamatrix.com/gallery-test/
    Here’s the custom CSS coding:

    #wrapper .tablepress {
    width: 600px;
    }

    .tablepress tbody td {
    text-align: center;
    vertical-align: top;
    border: none;
    padding: 0 0;
    line-height: 1;
    }

    .tablepress img {
    margin: 0;
    border: 0;
    background-color: transparent;
    }

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

    .tablepress .column-1,
    .tablepress .column-2,
    .tablepress .column-3,
    .tablepress .column-4,
    .tablepress .column-5 {
    text-align: center;
    }

    .tablepress .row-1 .column-1
    .tablepress .row-2 .column-2
    .tablepress .row-3 .column-3
    .tablepress .row-4 .column-4 {
    background-color: transparent;
    }

    https://wordpress.org/plugins/tablepress/

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

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    We’ll just have to adjust your CSS a bit:
    Please remove this:

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

    and extend

    #wrapper .tablepress {
width: 600px;
}

    to

    #wrapper .tablepress {
  width: 600px;
  margin: 0 auto 1em;
}

    Regards,
    Tobias

    Thread Starter LightQuest

    (@lightquest)

    10 years, 9 months ago

    That worked great to center the table, thanks! But, the images are still full-size in IE but small in Chrome. Any ideas?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    you will then probably have to set the widths for the images as well, e.g. by adding something like

    .tablepress-id-3 img {
  width: 150px;
  height: 300px;
}

    Regards,
    Tobias

    Thread Starter LightQuest

    (@lightquest)

    10 years, 9 months ago

    Unfortunately that didn’t work. The page looked fine before (with all of my original CSS custom coding – before I attempted to streamline it), but the site has many, many tables and the coding was too cumbersome with each table having it’s own custom code like this:

    .tablepress-id-25 tbody td {
    text-align: center;
    vertical-align: top;
    border: none;
    padding: 0 0;
    line-height: 1;
    }

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

    .tablepress-id-25 img {
    margin: 0;
    border: 0;
    background-color: transparent;
    }

    .tablepress-id-25 .column-1,
    .tablepress-id-25 .column-2,
    .tablepress-id-25 .column-3,
    .tablepress-id-25 .column-4,
    .tablepress-id-25 .column-5 {
    text-align: center;
    }

    .tablepress-id-25 .row-1 .column-1 {
    background-color: transparent;
    }

    .tablepress-id-25 .row-2 .column-2 {
    background-color: transparent;
    }

    .tablepress-id-25 .row-3 .column-3 {
    background-color: transparent;
    }

    .tablepress-id-25 .row-4 .column-4 {
    background-color: transparent;
    }

    So, I attempted to make it more efficient. Maybe I eliminated something important? Also, again just learning CSS, if I switch my custom CSS over to tell Tablepress to center all tables, then decide one table shouldn’t be centered can I add in custom CSS for that specific table and it will override the general centering CSS?

    Thanks for your help!!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    hmm, I just checked in an old IE (I don’t have an up-to-date one available at the moment), and the images have the same width as in Chrome there…

    And yes, you could override this for individual tables again, by using the table-ID-based selectors (.tablepress-id-123) instead of the general (.tablepress). The more specific one just has to be used below the general one, so that it can override it.

    Regards,
    Tobias

    Thread Starter LightQuest

    (@lightquest)

    10 years, 9 months ago

    Thanks so much! We figured out it was the size of the wrapper that was causing the issue in Chrome. We’re all good now! Happy to send a donation your way…. :^)

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    great! Good to hear that you found the cause for this!
    And thanks for the donation, I really appreciate it!

    Best wishes,
    Tobias

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

The topic ‘Shrunken Table in Chrome’ is closed to new replies.

Tags