title: How to remove extra white space in jQuery DataTables
body: <p>I'm using jQuery DataTables and having an issue with it</p>
  
  <p><a href="https://i.stack.imgur.com/CCyA9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CCyA9.png" alt="image"></a></p>
  
  <p>In <strong>Dest Port</strong> column there is a lot of extra space and same as in <strong>Sub Client</strong> and <strong>Prod Type</strong> columns and my initialization code is:</p>
  
  <pre><code>function calcDataTableHeight() {
      return $(document).height() - 320;
  }
  
  var browserScrollPercentage = function () {
       if($.browser.chrome) {
          return '178%';
       }else{
          return '228%';
       }
  }
  
  var oTable = new Datatable();
  oTable.init({
      src: $("#tableOrder"),
      onSuccess: function (oTable) {
          // execute some code
      },
      onError: function (oTable) {
          // execute some code
      },
      loadingMessage: 'Loading...',
      dataTable: {
          "bStateSave": false,
          "bScrollAutoCss": true,
          "lengthMenu": [
              [30, 60, 90, 120, -1],
              [30, 60, 90, 120, "All"]
          ],
          "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 31 ]}],
          "pageLength": 30,
          "ajax": {
              "url": "order-ajax" // ajax source
          },
          "order": [
              [1, "desc"]
          ], // set first column as a default sort by desc
          scrollY: calcDataTableHeight(),
          "sScrollX": "100%",
          "sScrollXInner": browserScrollPercentage(),
          "bScrollCollapse": true,
          "sDom": '&lt;"top"&gt;rt&lt;"bottom"pi&gt;&lt;"clear"&gt;',
          "bInfo": true
      }
  });
  </code></pre>
  
  <p>I've tried many things from different sources but didn't succeed I also try trim in my jQuery code and also in PHP code but didn't work for me.</p>