Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1167075

    Is there a way to control how wide each column of a table is?

    Here’s the default I’m getting now
    skinny table

    Here’s the page so you see how much room there is to be filled up:
    table on page

    #1168429

    Hey Thomas,
    Sorry for the late reply, there is not a setting to control this, but we can adjust with some css.
    Please link to your page and explain how you would like it to look.
    I assume that in mobile, the table should be full-width and centered, and the first column should be 25% and the second column should be 75% so the text is on one line?

    Best regards,
    Mike

    #1168629

    Hi Mike,
    Thank you. The website is https://jorvik.press.
    Login credentials below.
    Yes, I think 25% / 75% would work great, and once I see how you’ve done it I should be able to make any further adjustments.

    #1168645

    Hi,
    Thanks for the link, I see that your table is in a column that is 2/5 so that is why it is narrow, form the screenshot I thought it was on a mobile device, but that is ok.
    So in the css I wrote it for your single product pages so it won’t change other tables you might have, and assuming they are all the same this should work for all of them:
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (min-width: 768px) { 
    #top.single-product .avia-data-table .avia-desc-col {
        text-align: center !important; 
        width: 100px !important;
        padding: 9px !important; 
    }
    #top.single-product .avia-data-table .avia-highlight-col { 
        width: 350px !important;
    }
    }

    Then clear your browser cache and any cache plugin, and check.

    I used px widths instead of percentages because it is a small area, if you want the columns in the table larger please use a column larger than 2/5 as the container.
    Please let us know if this is what you had in mind.

    Best regards,
    Mike

    #1177354

    Hi Mike,
    Thank you for your help. I tried to write you back around year end, but you guys were closed for the holidays (which is great! – welcome back).
    In the meantime, I’ve made a ton of changes (ditched WooCommerce for EasyCart, got that entirely configured, now am switching back – argh.)
    At this point, the table is indeed wider, but that’s true whether or not your code is in General Styling > Quick CSS.
    Here’s what I’m wanting it to look like ideally –
    table with narrow first column, wider 2nd column.
    …specifically, with the first column narrower, and the second one to be wider to accommodate longer text.

    Thanks for your previous help, and in advance.

    • This reply was modified 4 years, 4 months ago by steed. Reason: had the wrong password in there
    #1177551

    Hi,
    For the table to have a max width of 270px (70px+200px) please try this css:

    @media only screen and (min-width: 768px) { 
    #top.single-product .avia-data-table th.avia-desc-col {
        text-align: right !important; 
        width: 70px !important;
        padding: 0px !important; 
    }
    #top.single-product .avia-data-table .avia-highlight-col { 
        width: 200px !important;
    }
    #top.single-product div .avia-table {
        width: 270px !important; 
    }
    }

    but I find that the first column text is larger than 70px, you can change the values in the code to suit, perhaps to 100px for the first column, 300px for the second, and 400px for the total table width.

    @media only screen and (min-width: 768px) { 
    #top.single-product .avia-data-table th.avia-desc-col {
        text-align: right !important; 
        width: 100px !important;
        padding: 0px !important; 
    }
    #top.single-product .avia-data-table .avia-highlight-col { 
        width: 300px !important;
    }
    #top.single-product div .avia-table {
        width: 400px !important; 
    }
    }

    also if you want the rows in the second column to have the same background colors, the change the second column to default from highlight:
    2020-01-23-043401
    Best regards,
    Mike

    #1177909

    Hi Mike,

    Thanks again. I apologize for keeping after this, but I’m still not seeing much difference (except for the background color change – that worked like a charm!)

    I did the change you suggested (using the 400 pixel width, good call). I put the second quickCSS block in. Now what I see after cache clearing in all three browsers (Safari, Firefox, Chrome on Mac) is a table that seems like it’s about 400px wide, with columns equally split at 200px.

    What am I missing? Are you seeing it differently on Windows?

    #1178064

    Hi,
    I see that you were using HTML inline commenting in your css: <!-- Table styling -->
    so I corrected to css inline commenting: /* Table styling */
    and now your css is working, please clear your browser cache and check.

    Best regards,
    Mike

    #1178097
    This reply has been marked as private.
    #1178113

    Hi,
    No, it’s fine, just glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    #1180075

    Hi Mike. Yes, thank you again.

    #1180304

    Hi steed,

    Great :) We are closing the thread.

    Best regards,
    Victoria

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Custom Table Column Width’ is closed to new replies.