如何調整Table Tr和Td？

-2

這裏，我M使用jQuery Datatable插件，但我的圖片td佔用太多寬度，而動作按鈕td分配的寬度較小。如何調整Table Tr和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>

來源

2017-07-15 Next Door

在編碼環境中，在大多數情況下，清晰的理解不是由圖像傳遞，而是由代碼傳達。 – trincot

在你的列定義中，你可以使用寬度。 – Bindrid

我通常設置除一列之外的所有列的寬度，然後將表格放置在最大寬度集合的div中 – Bindrid

此工作的整個代碼，改變圖像Td的寬度.. find in detail Datatable document

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

來源

2017-07-16 06:44:19

如何調整Table Tr和Td？

回答

相關問題