WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Table Width in Internet Explorer (10 posts)

  1. nohops
    Member
    Posted 1 year ago #

    Hi Tobias,

    First of all, I want to say thank you for developing this plugin. It alone was the reason I started a website with my friend since we wanted a simple way to organize and sort information.

    The issue I'm having is getting the table to appear uniform across different browsers. Specifically, the width of each column was an issue from the get go, so I expanded the width of my actual site to 1100 pixels and later used CSS to alter the width of the table.

    The table looks great in Firefox, Chrome, and Safari but Internet Explorer are still giving me trouble (as I hear it does to many people).

    The website is downwiththehops.com

    Below is my current custom CSS. Any help would be appreciated.

    Thank you,
    Colin

    .tablepress {
    table-layout: fixed;
    width: 100%;
    }

    .tablepress-id-1 .column-1 {
    width: 35%;
    line-height: 1.5em;
    }

    .tablepress-id-1 .column-2 {
    width: 33%;
    line-height: 1.5em;
    }

    .tablepress-id-1 .column-3 {
    width: 33%;
    line-height: 1.5em;
    }

    .tablepress-id-1 .column-4 {
    width: 15%;
    }

    .tablepress-id-1 .column-5 {
    width: 16%;
    }

    .tablepress-id-1 .column-6 {
    width: 18%;
    }

    .tablepress-id-1 .column-7 {
    width: 109%;
    line-height: 1.5em;
    }

    .tablepress-id-1 th,
    .tablepress-id-1 td {
    padding: 3px;
    font-size: 13px;
    }

    Within my style.css file of the main website I have the following additions which don't seem to help:

    .ie .site {
    max-width: 1100px;
    }

    .ie5 .site {
    max-width: 1100px;
    }

    .ie6 .site {
    max-width: 1100px;
    }

    .ie7 .site {
    max-width: 1100px;
    }

    .ie8 .site {
    max-width: 1100px;
    }

    .ie9 .site {
    max-width: 1100px;
    }

    .opera .site {
    max-width: 1100px;
    }

    .webkit .site {
    display: block;
    max-width: 1100px;
    }

    .safari .site {
    display: block;
    max-width: 1100px;
    }

    .gecko .site {
    max-width: 1100px;
    }

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    I can confirm that the table looks totally broken in IE, but unfortunately, I have no idea why, and I can't really spot anything that could be causing this.
    Therefore, we should try to find the cause in small steps, and the first one should be to rule out an issue in the theme.
    Could you therefore please temporarily remove all of your "Custom CSS" again (save it in a file on your computer as a backup)? Also, please switch to the WordPress default theme TwentyTwelve. That should help in getting closer to the source of the issue.

    Regards,
    Tobias

  3. nohops
    Member
    Posted 1 year ago #

    Hey Tobias,

    Thanks for your response. I've reset the site so it's back to the original TwentyTwelve theme and no custom CSS through Tablepress.

    Unfortunately, I don't have access to IE right now, but in Firefox and Safari, you can see it is mainly the JC# CE# and Avg# which started this debacle.

    Thanks,
    Colin

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Colin,

    thanks for that!

    I just checked the table in IE again, and now all problems are gone (except of course that JC #, CE # and Avg # thing).

    And instead of messing with the column widths, we can fix this in an easier way: We can simply prohibit automatic line breaks in those three cells.
    To do that, please add this to the "Custom CSS" textarea:

    .tablepress-id-1 thead th {
      white-space: nowrap;
    }

    That should fix the table in TwentyTwelve. If you can confirm that (in all browsers), I suggest to switch back to the other theme, and check there again.

    Regards,
    Tobias

  5. nohops
    Member
    Posted 1 year ago #

    Hey Tobias,

    It is looking good on Safari, Firefox, and Chrome, but as I said before, I don't have access to IE so I can't speak for that.

    The # columns (4-6) are all great in the above browsers but it brings up why I was making custom widths in the first place. The first column (types) feels tight, while the last one, 7 (notes) has room to tighten up since some are already two lines, but not filling up the entire column.

    I put back the padding and font in the custom CSS and it still looks good

    .tablepress-id-1 th,
    .tablepress-id-1 td {
    padding: 3px;
    font-size: 13px;
    }

    I'm assuming if I add back in a string like this:

    .tablepress-id-1 .column-1 {
    width: 35%;
    line-height: 1.5em;
    }

    it will mess up again in IE? This is tough to do when I don't have the browser that is causing the issue, so I apologize for the back an forth.

    Thanks,
    Colin

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    good to hear that columns 4-6 are ok. So far everything is still ok in IE as well.

    For the first column: That makes sense. Adding that CSS for the width should be fine. I can't really see how that can cause trouble in IE.

    So, the best way to proceed would be to wait until you have access to an IE again, as you can then test better.

    Regards,
    Tobias

  7. nohops
    Member
    Posted 1 year ago #

    Thank you for all the quick responses Tobias. I'll take your advice on waiting until I have IE access otherwise the back and forth is just silly.

    I can only guess if I add back in the custom width, it will mess up IE because it's ending up back where I started with the custom CSS. Perhaps it is the "line-height: 1.5em;" part of the equation that I did not apply to each column? I will add that back to each one so it's uniform, and hopefully that will help.

    This is all conjecture, but I will be sure to respond with a follow up when I regain access to IE.

    Thanks,
    Colin

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Colin,

    yes, that will be fine.

    I suggest to go without the line-height CSS for now. If the line height really is a problem in your real theme, we can think about it again.

    Regards,
    Tobias

  9. nohops
    Member
    Posted 1 year ago #

    Hey Tobias,

    Back with a PC and IE and I'm happy to say it's looking great on all browsers.

    I applied the "line-height: 1.7em;" uniformly to all the columns and it still holds up.

    I do not have:

    .tablepress {
    table-layout: fixed;
    width: 100%;
    }

    and instead adjusted the columns I wanted using:

    .tablepress-id-1 .column-1 {
    width: 13%;
    }

    I'm confused on why IE had an issue in the first place, and tested it by removing the "line-height: 1.7em;" to one of the columns (but keeping it on the other 6), but it still looked fine, so the mystery isn't solved, but the problem is resolved, so I'll take it.

    Thank you!
    Colin

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Colin,

    very nice! :-)
    Good to hear that the problem is gone. I also don't have a clue where it came from though...

    Best wishes,
    Tobias

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic