Hide a column with Mobile view, not collapse

  • Resolved DannyG

    (@dannygarcia1971)


    3 years, 8 months ago

    Hi!

    I’m wondering if there is a way I could completely hide a specific column in mobile view only?

    Right now I have 4 columns and there’s not enough room on mobile to fit all the information of the table. So I would like to hide the very first column on mobile view only. Right now it collapses and I can see a PLUS sign to extend the very first column, but I want to hide it completely on mobile view only, without showing the plus sign.

    I would appreciate any tips!

    • This topic was modified 3 years, 8 months ago by DannyG.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author wpDataTables

    (@wpdatatables)

    3 years, 8 months ago

    Hello there, thank you for reaching out to us.

    There’s no way to hide it with the built-in features of the plugin, but you can add a custom class to this column (or multiple columns, if you want) and then hide it with media-query CSS.

    Access column settings, and add a custom CSS class “hideonmobile”; then in wpDataTables settings/Custom JS and CSS add this code:

    @media only screen and (max-width: 480px) {
    table.wpDataTable th.hideonmobile, td.hideonmobile {
        display: none !important;
    }
}

    This will hide the column on all devices that are below 480px in width.

    Kind regards.

    Thread Starter DannyG

    (@dannygarcia1971)

    3 years, 8 months ago

    Thanks a lot!!

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

The topic ‘Hide a column with Mobile view, not collapse’ is closed to new replies.