Make the column width fixed

Support
#1

Please see in the first image, in the Order Date column, ‘View Order Details’ and ‘Tracking Number’ labels are in one line but when the content in the Products column increases it pushes the columns to the right making ‘View Order Details’ and ‘Tracking Number’ labels in two different lines. Please see Pro Dashboard_1.jpg. How can I make the Products column fixed width so that the content remains within the width without making it expand.

Thanks

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.page-id-1303 .wcv-grid table > tbody > tr:nth-child(1) > td:nth-child(3) {
    max-width: 150px;
}
#3

Hi Thai,

I am sorry but the above code didn’t work. When the content in the Products columns grows, it pushes the other columns to the right making the ‘Order Date’ column narrow with ‘View Order Details’ and ‘Tracking Numberr’ in two different lines. Please see attached:

Appreciate your response.

#4

Hi there,

Please try this:

#post-1303 .wcvendors-table-order tr th:last-child {
    width: 300px !important;
}

Hope this helps.

#5

Thank you Jade, I played around with the width and the above code really worked great.
Just one more, how can we make the top row static in the table. I have highlighted the row in yellow. Please see attached.

Thanks

#6

Hi again,

Did you mean fixed row? It could be possible with custom development, but regretfully this would be outside the scope of support we can offer.

With that being said you can try out couple of CSS tricks over here http://jsfiddle.net/T9Bhm/7/ that may be helpful to you. try applying them according to your structure. Also see https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling

Take Care!