how to center barcode image in the table?

问题

i'am trying to desgine barcode label in odoo it printed well if it short barcode otherwise the barcode go over the table border and i can't read it with reader also sometimes it print in 2 label if the the name is in first cell is long so i need to set fixed size for the table here is 2 screenshots for the labels

here is the code

 <div class="col-xs-4" style="padding:0;" align="center">
                    <table class="table table-bordered mb-0" width="50mm" style="padding:0"  >
                      <tr  style="font-size: 50%;;padding:0" align="center" valign="center">
 <td style="font-size: 110%;;padding:0">
                            <strong t-field="product.name"/>
</td>
                      </tr>
                      <tr style="margin:0 auto;padding:0 auto;" align="center">
                        <td style="padding:1" align="center" colspan = "2">
                            <img t-if="product.barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', product.barcode,600 ,150)" style="width:120%;height:30%;margin:0 auto;padding:0 auto;"/>
                            <br style="text-align: center;padding:1;">     
                                <span  style="font-size: 6px;text-align: center;" t-field="product.barcode"/>
                            </br>
                        </td>
                      </tr>
                      <tr style="text-align: center;">
                        <td style="font-size: 50%;padding:0">www.autopartsegypt.com</td>
                      </tr>
                    </table>
             </div>

回答1:

Try using margin-right:1%; on the img or table tag and increase the percentage as required.

回答2:

Try this snippet , i use object fit with width , Do let me know if that prints well, you can set its width to 100% or in px what ever you want

img{
max-width: 100%;
}
.img-wrap img{
width: 200px;
object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table class="table table-bordered mb-0" style="text-align: center;" >
<tr >
<td >
<strong t-field="product.name">product.name</strong>
</td>
</tr>
<tr style="margin:0 auto;padding:0 auto;" align="center">
<td style="padding:1" align="center" colspan = "2"><div class="img-wrap">
<img src="https://i.stack.imgur.com/mqCU0.gif" style=""/></div>
<br style="text-align: center;padding:1;">
<span style="" t-field="product.barcode">product.barcode</span>

</td>
</tr>
<tr style="text-align: center;">
<td style="">www.autopartsegypt.com</td>
</tr>
</table>

来源：https://stackoverflow.com/questions/60167963/how-to-center-barcode-image-in-the-table