How to reduce width of data table columns

Question

I have a sharepoint 2013 list. Using data tables am retrieving the list data into a data table. How to reduce the width of particular columns in data table?

Thanks in advance.

Answer 1

Add the following script to script editor or content editor webpart. Replace the Column name to column name you want to increase the width

    <script src="/PublishingImages/javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function(){$("TH.ms-vh2-nograd:contains('Column 1')").css("width", "350px");

            $("TH.ms-vh2-nograd:contains('Column 2')").css("width", "350px");

             });

    </script>

Answer 2

Try the below code to adjust the column width in data table

For the first column

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

For more details check columns.width

For a specific column.

   $('#table_1').DataTable({
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' }
    ]
    });

Ref: Setting column width