Support » Plugin: TablePress » How to set width of last column in mobile?

  • Resolved sysguides

    (@sysguides)


    Hi

    I have a 6 column table. From columns 1-5 I have specified nowrap. But in column 6, I want the text to be wrapped. It’s working fine on desktop, but when viewed on mobile, the 6th column width is very small. In mobile view, I want the 6th column to be a little larger with text wrap.

    Following is the CSS code which works fine on desktop, but not very pleasant on mobile.

    /* From column 1-5 don't wrap lines */
    .tablepress-id-1 .column-1,
    .tablepress-id-1 .column-2,
    .tablepress-id-1 .column-3,
    .tablepress-id-1 .column-4,
    .tablepress-id-1 .column-5 {
    	white-space: nowrap;
    }
    
    /* Column 6 width ONLY on mobiles */
    @media only screen and (max-width: 768px) {
    
    	.tablepress-id-1 .column-6 {
    		width: 200px;
    	}
    
    }

    How do I do that?

    Thanks

    • This topic was modified 3 months, 1 week ago by sysguides.

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The “trick” here is to also set a “minimum width”, and not just a “width”. For that, please try

    .tablepress-id-1 .column-6 {
        width: 200px;
        min-width: 200px;
    }

    in your CSS.

    Regards,
    Tobias

    Thread Starter sysguides

    (@sysguides)

    @tobiasbg

    It’s working great now. Thanks.

    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 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.