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.

  • anyone know the solution? – Dheeraj Apr 20 '17 at 15:17
  • is it javascript ? or C#? – Mohamed El-Qassas MVP Apr 20 '17 at 15:43
  • I have done it using jquery – Dheeraj Apr 21 '17 at 8:49

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");


  • Not in the form...I need to reduce it in the datatable – Dheeraj Apr 21 '17 at 8:48

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.

    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' }

Ref: Setting column width

  • I have tried this...It dint work – Dheeraj Apr 21 '17 at 11:10
  • add your code in your question to can help you accurately – Mohamed El-Qassas MVP Apr 21 '17 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.