TablePress Column Width Does Not Render in Internet Explorer

  • Resolved jmyers2

    (@jmyers2)


    4 years, 9 months ago

    Good afternoon,
    I have used the following CSS to extend table width and it looks great in Chrome browser but does not render in Internet Explorer:
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #5e99aa;
    color: #000000;
    }

    .tablepress-id-1 .column-1,
    .tablepress-id-2 .column-1,
    .tablepress-id-3 .column-1 {
    width: 200px;
    }

    .tablepress-id-3 .column-2 {
    width: 1000px;
    }

    I personally never use IE, sadly our company is a super user and I need this to look well in both browsers. I did do a search of the previous support tickets and found this CSS to put in the Custom CSS section, however there was no change in IE.
    .tablepress th,
    .tablepress td {
    width: auto;
    }

    This page is in draft form and goes live on March 3. This link is a preview link and will expire in 48 hours. If you need me to reissue the link, just let me know.
    Thanks so much for your guidance with this issue.
    Julianna

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    This is caused by the “Horizontal Scrolling” feature, which does not work nicely in tables that are shown/hidden via “tabs” or similar (like your three buttons), due to how the JavaScript code behind it works.

    My suggestion would be to replace this with the purely CSS-based horizontal scrolling that the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ offers. For that, please uncheck the “Horizontal Scrolling” checkboxes on the tables’ “Edit” screens, and instead use the scroll mode of the mentioned TablePress Extension in the Shortcode parameters.

    Regards,
    Tobias

    Thread Starter jmyers2

    (@jmyers2)

    Thank you for getting back to me so quickly! I see how the “tabs” element can present an issue on various browsers. Appreciate the explanation. By adding the follow CSS to Plugin and unchecking “horizontal scrolling” in each table, I am pretty to close to it rendering correctly in Internet Explorer now (again looks great in Chrome).
    .tablepress-id-1,
    .tablepress-id-2,
    .tablepress-id-3 {
    width: 100% !important;
    }

    However in Tab 2 and Tab 3 (hidden) there is more space between columns than Tab 1 (shown). Is that also because of the hidden tabs?
    https://mmcri.org/ns/?page_id=27997&preview=1&_ppp=60e668b56f

    Thanks again!
    Julianna

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    likely yes. You could try setting a column width for the first column of each table (with equal values), see https://tablepress.org/faq/column-widths/

    Regards,
    Tobias

    Thread Starter jmyers2

    (@jmyers2)

    That worked – all set – thanks again for the help!
    Julianna

    • This reply was modified 4 years, 9 months ago by jmyers2.
    Plugin Author TobiasBg

    (@tobiasbg)

    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 ‘TablePress Column Width Does Not Render in Internet Explorer’ is closed to new replies.