如何调整Table Tr和Td？

Question

在这里，我使用jQuery Datatable插件，但我的图片td占用了太多宽度，而动作按钮td的宽度却减少了。

因此，每个按钮都与另一个按钮重叠。

如何根据数据存储宽度在Bootstrap，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>