首页 > 解决方案 > jquery数据表中每列的最大宽度

问题描述

桌子

<div class="row">
   <div class="col-lg-6">
       <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: 
       collapse; border-spacing: 0; width: 100%;">
          <thead>
            <tr>
               <th>Sr. No.</th>
               <th>Product</th>
               <th>Status Description</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>1</td>
               <td>Product 1</td>
               <td>Description</td>
            </tr>
            ....
         </tbody>
     </table>
   </div>
</div>

在此处输入图像描述

我想减小Product列的宽度,它应该是固定大小的,如果其中的数据长度增加,它不应该增加。

我试过在 th 中使用width="20%"但它只影响默认宽度。我也试过:

$('#datatable').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

但它也会改变默认宽度,但如果在 td 中插入更长的数据,它会增加。

此外,状态描述中的数据出现在一行中,有时会出现在页面之外,我如何才能保持该状态不变,以便数据显示在多行中。

我的目标是减少产品列的宽度,以便状态描述列可以显示在与产品相同的行中。

标签: htmljquerycssdatatable

解决方案


数据表图像

对我有用,我认为您的数据表是原因..因为您正在使用扩展行(也许)


推荐阅读