• Resolved kafung2010

    (@kafung2010)


    Hi Tobias

    I’m setup my table using import data from google sheet.. I want to adjust individual column width in my table. I have tried all the css code found in this forum but none of it work. Could you help take a look…

    thanks

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    What exactly are you trying to achieve with setting the column widths here? Do you want to make the table wider? Then you’d first have to increase the available content area in the theme, as the table currently already stretching to 100% of that.

    Regards,
    Tobias

    Thread Starter kafung2010

    (@kafung2010)

    Hi Tobias,

    I have total 6 column, I want each column have a fixed width.

    For Column 3, if the content is too long, it allowed to wrap the text.
    But for others column I don’t want the text/content to wrap.

    I set the column width with below code, but I notice the column 6 is wider than the column 5 (this 2 column is set to 10%)

    Also I notice the content of the column 1,5 & 6 is wrap even some content is short enough to fit inside the column without need to wrap.

    .tablepress thead th,
    .tablepress tbody td {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
    }

    .page-id-8 .tablepress .column-1 {
    width: 20%;
    }

    .page-id-8 .tablepress .column-2 {
    width: 10%;
    }

    .page-id-8 .tablepress .column-3 {
    width: 30%;
    }

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

    .page-id-8 .tablepress .column-5 {
    width: 10%;
    }

    .page-id-8 .tablepress .column-6 {
    width: 10%;
    }

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    please try this “Custom CSS” instead of what you are using now:

    .tablepress-id-8 img {
     display: inline;
     vertical-align: middle;
    }
    .tablepress-id-8 .column-1 {
    width: 20%;
    white-space: nowrap;
    }
    
    .tablepress-id-8 .column-2 {
    width: 10%;
    white-space: nowrap;
    }
    
    .tablepress-id-8 .column-3 {
    width: 30%;
    }
    
    .tablepress-id-8 .column-4 {
    width: 15%;
    white-space: nowrap;
    }
    
    .tablepress-id-8 .column-5 {
    width: 10%;
    white-space: nowrap;
    }
    
    .tablepress-id-8 .column-6 {
    width: 10%;
    white-space: nowrap;
    }

    Regards,
    Tobias

    Thread Starter kafung2010

    (@kafung2010)

    Hi Tobias,

    Your code work great after I change the icon arrow using html symbol instead of picture..
    thank you so much for your help and fast respon..

    best regards,

    Plugin Author Tobias B?thge

    (@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!

    This worked perfectly for me just now. Made my day! Thanks!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    great! Good to hear that his helped you as well!

    Best wishes,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘tablepress column width not work’ is closed to new replies.