How do I set the width of the datatable?

sarthaks21

I want the table to occupy only 50% of the screen as I'll use the other half for something else.

Here is the datatable initialization :

table =  $('#example').DataTable(
    {
        //"processing" : true,
        "ajax" : {
            "url" : "static/tab/ajax/tents.json",
            'dataSrc' : 'data'
        },
        searching: false,
        paging: false,

        "columns" : [
        {
          "className": 'details-control',
          "orderable": false,
          "data": null,
          "defaultContent": '',
          "width": "2.5",
        },
        {"data" : "Code", "width": "30"},
        {"data" : "Dt", "width": "10"}, {"data" : "LE", render: colorData, "width": "10"},
        {"data" : "SE", render: colorData, "width": "10"},{"data" : "NE", render: colorData, "width": "10"},
        {"data" : "PL", render: colorData, "width": "10"},
        {"data" : "yPL", render: colorData, "width": "10"},
        {"data" : "D-1%", render: colorData, "width": "7"}, {"data" : "D+1%", render: colorData, "width": "8"},
        {"data" : "D-2%", render: colorData, "width": "7"},
        {"data" : "D+2%", render: colorData, "width": "8"}, {"data" : "D%", render: colorData, "width": "7"},
        {"data" : "D+5%", render: colorData, "width": "8"}, {"data" : "D-10%", render: colorData, "width": "7"},
        {"data" : "D+10%", render: colorData, "width": "8.75"}, {"data" : "D-20%", render: colorData, "width": "7"},
        {"data" : "D+20%", render: colorData, "width": "8.75"},
        {"data" : "Mrgn", "width": "8", render: colorData}, {"data" : "Nt Mrgn", "width": "8", render: colorData}
      ],

      ///

      ///
    });

Here is the table initi in html:

    <table id="example" class = "exTable table table-bordered compact" >

Thank you in advance!

sandy

Hi @sarthaks21 ,

You just need to add some css to the dataTables_wrapper class. Take a look at this example and close the css, html and javascript tabs before running. If these aren't closed then the max-width property I've set will be overruled by the minimum widths for the columns, but you could then make use of something like an ellipsis renderer as described in this blog post.

Thanks,
Sandy