Datatables - обернуть тд к контенту

Question

У меня есть таблица, в которой некоторые столбцы содержат очень короткие данные. Пример:

Я хочу, чтобы такие столбцы были меньше, но columnDefs не работает:

<div class="table-responsive">
  <table id="my_table" class="table table-hover">
    ...
  </table>
</div>

и вот мой jquery:

let table = $('#' + table_id).DataTable({
        "scrollX": true,
        "order": order,
        "columnDefs": [
            {"width": "5%", "targets": [9,10,11]}
        ]
    });

Я использую Bootstrap4.

Answer 1

ОК, так получается, что это вызвало тот факт, что я также добавил поиск в каждый столбец, используя 'input'.

$('#' + table_id + ' tfoot th').each(function () {
        const title = $(this).text();
        if (title) {
            $(this).html('<input type="text" placeholder="search..."/>');
        }
    });

Это сделало все столбцы одинаковой ширины. Чтобы исправить это Я добавил 'style = "width: 100%"'.

$('#' + table_id + ' tfoot th').each(function () {
        const title = $(this).text();
        if (title) {
            $(this).html('<input style="width:100%" type="text" placeholder="search..."/>');
        }
    });