Максимальная ширина для каждого столбца в jquery datatable

Question

Таблица

<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 , он должен иметь фиксированный размер и не должен увеличиваться при увеличении длины данных.

Я пробовал использовать width = "20%" в th, но это влияет только на ширину по умолчанию. Я также пробовал:

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

, но он также меняет ширину по умолчанию, но увеличивается, если в td вставляются более длинные данные.

Также данные в описании состояния отображаются в одной строке, которая иногда выходит за пределы страницы, как я могу сохранить это фиксированным, чтобы данные отображались в нескольких строках.

Моя цель - уменьшить ширину столбца «Продукт», чтобы столбец «Описание статуса» мог отображаться в той же строке, что и «Продукт».

Answer 1

Просто пришлось удалить nowrap из класса, чтобы данные отображались в нескольких строках, и если вы хотите удалить +/- remove dt-responsive и добавить table- layout: fixed в теге стиля таблицы и укажите ширину для каждого столбца.

Answer 2

Работает для меня, я думаю, что ваши данные являются причиной .. потому что вы используете расширенную строку (возможно)