Support » Plugin: TablePress » Column width ignored?

  • Resolved lukascech

    (@lukascech)


    I have a strange one here. My CSS (stored in Tablepress Plugin settings>custom CSS) is below. But I can’t get column 8 (one with the stars) not to break the stars into two rows on mobile. When I watch the table load on mobile, it loads fine (all stars in one row), but then some other formatting is loaded and that breaks it into two rows. Tested on various mobile browsers.

    Strangely, when I had the width at 110px, it was breaking 1 star into another column. When I increased the width to 130px, it put 2 stars into the second row?? see image of how I see it on my mobile: https://mega.nz/file/qfJBVCSY#IJQjMUUvJikkDnFP9c0w-9yMHq-Nv12T8cniE7GMUbA

    Note that all mobile emulators, developer tools on PC show it correctly, it only breaks on actual mobile.

    .tablepress tbody td,
    .tablepress tfoot th,
    .tablepress thead th {
    	font-size: 13px !important;
    }
    
    .tablepress-table-description {
    	background: #fffdbd;
    	padding: 15px;
    	color: #616161;
    	font-size: 13px !important;
    }
    
    .tablepress-id-1 td.column-1,
    .tablepress-id-1 td.column-2 {
    	width: 66px;
    }
    
    .tablepress-id-1 td.column-4 {
    	width: 50px;
    }
    
    .tablepress-id-1 td.column-8 {
    	min-width: 130px;
    	color: white;
    	word-break: keep-all;
    }
    
    .tablepress-id-1 td.column-9 {
    	min-width: 200px;
    }
    
    @media only screen and (min-width : 1000px) {
    
    	.tablepress-id-1 td.column-9 {
    		min-width: 20vw;
    	}
    
    }
    
    .tablepress-id-4 td.column-11 {
    	max-width: 200px;
    }
    

    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 email, and sorry for the trouble.
    Also, sorry for the late reply. I was very busy with personal life, so that I could not reply earlier.

    Instead of messing around with column widths, we should instruct the browser to not add line breaks there. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 td.column-8 {
      white-space: nowrap;
    }

    Regards,
    Tobias

    joostheikoop

    (@joostheikoop)

    Thanks for this reply!
    It fixed the issue for me.
    I Hope your personal life wil enter calm waters 😉
    Have a nice day!

    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!

    Thread Starter lukascech

    (@lukascech)

    aaah, I was trying that with word-break, but should have thought of white-space, thanks Tobias.

    column widths – I do need to mess around with them to make the table fit the screen better.

    All works now, thanks! I’ve rated the plugin a long time ago already 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks a lot, I really appreciate it!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Column width ignored?’ is closed to new replies.