Как сделать фиксированную ширину таблицы datatables с одинаковой шириной колонок?

Question

[Ася]

По дефолту колонки таблицы ресайзятся с учетом контента. Как сделать так чтобы ширина всей таблицы была фиксированная (ака 70% от всей ширины экрана), а колонки были одинаковой ширины вне зависимости от количества колонок в датасете, который поступает в таблицу динамически?

Answer 1

[iljaGolubev]

Если речь об этих datatables , то в общем-то с помощью css и атрибутов html.
Например, если в body кроме table больше ничего нет, то так:

<table id="example" width="70%" style=" white-space: pre-wrap;">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
    </thead>
    <!-- ... -->

$('#example').DataTable( {
    autoWidth: false,
    columnDefs: [
        { targets: '_all', "width": "1%" }
    ]
} );

Если используете бутстрап - у таблицы не должно быть 'nowrap' css класса.
Используйте style="overflow-wrap: anywhere;" eсли в датасете есть слишком_длинные_значения_которые_точно_не_влезут в конечную ширину колонки .

Comments

[Ася]

прописала это все, но ничего не изменилось

[iljaGolubev]

конкретнее вопрос задайте. покажите html и js.

[Ася]

iljaGolubev,

var miniTable = $("#classIndicatorDetails"+rowNumber).DataTable({
        data:
dataset.map(d => {
        return Object.values(d)
        })
      ,
        columns: col_names,
        autoWidth: false,
        columnDefs: [{
          targets: '_all', width: "1%"
        }],

        ordering: false,
        searching: false,
        "bLengthChange" : false, 
        "bInfo":false,
        "bPaginate": false

        })

это таблица внутри другой дататэйблз таблицы

[iljaGolubev]

это таблица

html код где?

[Ася]

iljaGolubev,

html +=
      '<div class="minitable" style="display: table;">' +
        '<table class="indicator" id="'+classIndicatorDetails+'" style="display:inline-block;">' +
        '<thead>' +
        '</thead>' +
        '<tbody>' +
        '</tbody></table></div>';

[iljaGolubev]

Ася, этого не достаточно, чтобы понять что у вас не так. да и не html это ;)

Вот вроде ка работает.

[Ася]

iljaGolubev, это html который я создаю через js потому что эта таблица создается и выпадает при клике на строку из другой таблицы

но я попробую привести пример чего-то упрощенного чтобы воспроизвести проблему