Hello there I have a datatable that just won't let me adjust the column width

Vanq

Hello there I have a datatable that just won't let me adjust the column width or that doesn't auto adjust the width. Every column has the same width.

I use these:

<!-- NEW -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">
<!-- NEW -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

This is my script for the table:

        <script>
            $(document).ready(function () {
              // Setup - add a text input to each footer cell
              $('.content-table tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
              });

              // DataTable
              var table = $('.content-table').DataTable({
                scrollY: '70vh',
                scrollCollapse: true,
                scrollX: true,



                columnDefs: [
                  { targets: [12], searchable: false },
                  { targets: [12], visible: false },

                  { targets: [0], "width": '20px'},

                ],




                initComplete: function () {
                  // Apply the search
                  this.api().columns().every(function () {
                    var that = this;

                    $('input', this.footer()).on('keyup change clear', function () {
                      if (that.search() !== this.value) {
                        that
                          .search(this.value)
                          .draw();
                      }
                    });
                  });
                }

              });


              $('a.toggle-vis').on('click', function (e) {
                e.preventDefault();

                // Get the column API object
                var column = table.column($(this).attr('data-column'));

                // Toggle the visibility
                column.visible(!column.visible());
              });

            });
          </script>

The columndef width part doesn't work. Is there a way to address the columns like the following way?

div.dataTables_wrapper {
      padding-left: 10px;
      padding-right: 10px;
      width: 100%;
      margin: 0 auto;
    }

colin

I replied to your comment on your other post - see here.

Colin