テーブルTrとTdの調整方法は？

Question

ここでは、jQuery Datatableプラグインを使用していますが、画像tdの幅が大きすぎます。アクションボタンtdの幅が狭くなります。

結果として、各ボタンは互いに重なり合っています。

データの保存幅に応じて、ブートストラップ、CSS、jQueryの幅をどのように割り当てることができますか？ここでは明確な理解のために

画像

はビュー

<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

これは画像Tdの幅を変え、働いていた。.. find in detail Datatable document

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

で全体のコードです