Changing column width at invoice

Hello,

I will like to change column width at invoice.

Is anyone done this?

I know that it can be done using custom CSS.

If someone has an example of custom CSS to do this, it will help.

Regards

You need to customize the data-ref=“product_table-product” in include tag in the design view.

It’s hard explain and most of the time would be try and error.

1 Like

Can you please send me your invoice example?
I hope I can figure it out with that.

I just do some change but not much.

[data-ref=“product_table-product.item-th”] {
width: 120px;
}
[data-ref=“product_table-product.description-th”] {
width: 40%;
}

Thanks!

I have done it like this:

[data-ref=“table”] > thead > tr > th:first-child {
width: 3%;

}

[data-ref=“table”] > thead > tr > th:nth-child(2) {
width: 46%;

}

[data-ref=“table”] > thead > tr > th:nth-child(3) {
width: 5%;

}

[data-ref=“table”] > thead > tr > th:nth-child(4) {
width: 9%;

}

[data-ref=“table”] > thead > tr > th:nth-child(5) {
width: 16%;

}

[data-ref=“table”] > thead > tr > th:nth-child(6) {
width: 7%;

}

[data-ref=“table”] > thead > tr > th:nth-child(7) {
width: 5%;

}

[data-ref=“table”] > thead > tr > th:nth-child(8) {
width: 9%;

}
2 Likes