title: How to adjust Table Tr and Td?
body: <p>Here, I M using <a href="https://datatables.net/" rel="nofollow noreferrer">jQuery Datatable</a> plugin, but my image <code>td</code> is taking too much width while the action-buttons <code>td</code> is allocated less width.</p>
  
  <p>As a result each button is overlapping the other.</p>
  
  <p>How can I assign the width, in Bootstrap, CSS and jQuery according their data storing width?</p>
  
  <p><strong>Image</strong> for clear understanding
  <a href="https://i.stack.imgur.com/nSOvL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSOvL.png" alt="enter image description here"></a></p>
  
  <p>Here is the whole code in <strong>View</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $('#book-table').DataTable();
       });
     &lt;/script&gt;
  
      &lt;div class="container"&gt;
      &lt;?=anchor('','&lt;i class="ion-arrow-return-left"&gt; &lt;/i&gt;Go Back',
        ['class'=&gt;'btn btn-success btn-sm','onclick'=&gt;'window.history.back()' 
        ,'style'=&gt;'margin:2%;'])?&gt;
            &lt;div class="row"&gt;
         &lt;div class="col-md-10"&gt;
  
      &lt;table id="book-table" cellspacing="1" cellpadding="1" border="2" 
    class="table table-bordered table-hover"&gt;
      &lt;thead&gt;     
   &lt;tr&gt;                   
    &lt;th&gt;Image&lt;/th&gt;
   &lt;th&gt;Order No&lt;/th&gt;
   &lt;th&gt;Product&lt;/th&gt;
   &lt;th&gt;Ordered Date&lt;/th&gt;
   &lt;th&gt;Innvoice&lt;/th&gt;
   &lt;th&gt;Action&lt;/th&gt;
  
  
          &lt;/tr&gt;
      &lt;/thead&gt;
   &lt;tbody&gt;
     &lt;?php  foreach($new_orders as $ordr) {?&gt;
  
    &lt;tr&gt;
      &lt;td&gt;
      &lt;?phpif(!is_null($ordr['image'])){
       ?&gt;
      &lt;img src="&lt;?=$ordr['image']?&gt;" class=img-thumbnail alt='Cinque Terre' 
      style="width: 20%; height: 20%"&gt;
     &lt;?}?&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;?=$ordr['s_order_id']?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?=$ordr['name']?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?=$ordr['s_order_date']?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?=$ordr['innvoice']?&gt;&lt;/td&gt;
      &lt;td&gt;
  
       &lt;?php echoanchor('vendors/pages/selected_order_detail_page/'
        .$ordr['s_order_id'].'/'.$ordr['id'],'&lt;i class="fa fa-circle-o"&gt;
         &lt;/i&gt; Detail',['class'=&gt;'btn btn-success btn-xs'])?&gt;
  
        &lt;?php echo anchor('vendors/addcontroller/accept_order/'
         .$ordr['s_order_id'].'/'.$ordr['id'],
        '&lt;i class="ion-checkmark-circled"&gt;&lt;/i&gt; Accept',
          ['class'=&gt;'btn btn-info btn-xs','onclick'=&gt;"return confirm('Are you 
           Serious to accept the order?')"])?&gt;
  
         &lt;?php echo anchor('vendors/deletecontroller/rejected_order/'
         .$ordr['s_order_id'].'/'.$ordr['id'],
          '&lt;i class="ion-trash-b"&gt;&lt;/i&gt; Reject',['class'=&gt;'btn btn-danger btn-
             xs','onclick'=&gt;"return 
            confirm('Think, Before Rejecting the order?')"])?&gt;
         &lt;/td&gt;       
  
      &lt;/tr&gt;  
      &lt;?php }?&gt;
        &lt;/tbody&gt;
     &lt;/table&gt; 
     &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>