如何调整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？

回答

相关问题