Comment régler Table Tr et Td?

Question

Ici, je M en utilisant jQuery Datatable plugin, mais mon image td prend trop de largeur tandis que les boutons d'action td est alloué moins de largeur. Il en résulte que chaque bouton chevauche l'autre

.

Comment puis-je affecter la largeur, dans Bootstrap, CSS et jQuery en fonction de leur largeur de stockage de données?

image pour une meilleure compréhension

Voici le code entier dans Voir

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#book-table').DataTable(); 
    }); 
    </script> 

    <div class="container"> 
    <?=anchor('','<i class="ion-arrow-return-left"> </i>Go Back', 
     ['class'=>'btn btn-success btn-sm','onclick'=>'window.history.back()' 
     ,'style'=>'margin:2%;'])?> 
      <div class="row"> 
     <div class="col-md-10"> 

    <table id="book-table" cellspacing="1" cellpadding="1" border="2" 
    class="table table-bordered table-hover"> 
    <thead>  
<tr>     
    <th>Image</th> 
<th>Order No</th> 
<th>Product</th> 
<th>Ordered Date</th> 
<th>Innvoice</th> 
<th>Action</th> 


     </tr> 
    </thead> 
<tbody> 
    <?php foreach($new_orders as $ordr) {?> 

    <tr> 
    <td> 
    <?phpif(!is_null($ordr['image'])){ 
    ?> 
    <img src="<?=$ordr['image']?>" class=img-thumbnail alt='Cinque Terre' 
    style="width: 20%; height: 20%"> 
    <?}?> 
    </td> 
    <td><?=$ordr['s_order_id']?></td> 
    <td><?=$ordr['name']?></td> 
    <td><?=$ordr['s_order_date']?></td> 
    <td><?=$ordr['innvoice']?></td> 
    <td> 

    <?php echoanchor('vendors/pages/selected_order_detail_page/' 
     .$ordr['s_order_id'].'/'.$ordr['id'],'<i class="fa fa-circle-o"> 
     </i> Detail',['class'=>'btn btn-success btn-xs'])?> 

     <?php echo anchor('vendors/addcontroller/accept_order/' 
     .$ordr['s_order_id'].'/'.$ordr['id'], 
     '<i class="ion-checkmark-circled"></i> Accept', 
     ['class'=>'btn btn-info btn-xs','onclick'=>"return confirm('Are you 
     Serious to accept the order?')"])?> 

     <?php echo anchor('vendors/deletecontroller/rejected_order/' 
     .$ordr['s_order_id'].'/'.$ordr['id'], 
     '<i class="ion-trash-b"></i> Reject',['class'=>'btn btn-danger btn- 
      xs','onclick'=>"return 
      confirm('Think, Before Rejecting the order?')"])?> 
     </td>  

    </tr> 
    <?php }?> 
     </tbody> 
    </table> 
    </div> 
    </div> 
    </div> 

Answer 1

cela a fonctionné, en changeant l'image Td largeur .. find in detail Datatable document

 <script type="text/javascript"> 
     $('#book-table').dataTable({ 
    "columnDefs": [ 
    { "width": "15%", "targets": 0 }] 
    }); 
</script>