title: Avoid Horizontal Scrolling with JQuery DataTable plugin
body: <p>How can I set the column width in a table that uses <a href="http://datatables.net/" rel="nofollow noreferrer">JQuery DataTable</a> plugin to avoid the horizontal scroll ?</p>
  
  <p>What I've tried</p>
  
  <pre><code>var table = $(data.datatable.container).DataTable({
                      dom: "frtiS",
                      "columnDefs": [{ "width": "5%", "targets": 0 }],
                      autoWidth: false,                    
                      scrollX": false,
                      scrollY: "250px",
                      paging: true,
                      order: true,
                      language: {
                          info: data.datatable.info,
                          search: data.datatable.language.search,
                          zeroRecords: data.datatable.language.zeroRecords,
                          emptyTable: data.datatable.language.emptyTable,
                          infoEmpty: data.datatable.language.infoEmpty,
                          infoFiltered: data.datatable.language.infoFiltered,
                          loadingRecords: data.datatable.language.loadingRecords,
                          processing: data.datatable.language.processing,
                          paginate: {
                              first: data.datatable.language.paginate.first,
                              previous: data.datatable.language.paginate.previous,
                              next: data.datatable.language.paginate.next,
                              last: data.datatable.language.paginate.last
                          }
                      }
                  });
  </code></pre>
  
  <p>But doesn't work</p>
  
  <p><img src="https://i.stack.imgur.com/prW7v.png" alt="enter image description here"></p>
  
  <p><strong>TABLE</strong></p>
  
  <pre><code>&lt;table id="tabelaVendedorPorEstado" style="overflow-x: hidden;" class="table tabelaListagemVendedores"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Vendedores&lt;/th&gt;
                      &lt;th&gt;Valor&lt;/th&gt;
                      &lt;th&gt;%&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;!-- Some TR TD here --&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>