jQuery Grid - horizontal scrollbar appears

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
GRID 1 : OK -> no width for the grid, OK.<br>
GRID 2 : OK -> width of grid "100%", 2 columns with a width of 100.<br>
grid 3 : OOOOPS, scrollbar -> width of grid "100%", 1 column with a width of "20%"<br><br>
<div id="jqxgrid"></div>
<br>
<div id="jqxgridReadyPixel"></div>
<br>
<div id="jqxgridReadyPercent"></div>

JavaScript

var data = new Array();
  
	var firstNames = [
      "Andrew"];
  var lastNames = [
      "Fuller"];
  var productNames = [
      "Black Tea"];
  var priceValues = [
      "2.25"];
  for (var i = 0; i < 5; i++) {
      var row = {};
      var productindex = Math.floor(Math.random() * productNames.length);
      var price = parseFloat(priceValues[productindex]);
      
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row["productname"] = productNames[productindex];
      
      data[i] = row;
  }
	
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      source: dataAdapter,                   
 
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: "20%"
      }, {
          text: 'Product',
          datafield: 'productname'
      }]
  });
	
	$("#jqxgridReadyPixel").jqxGrid({
      theme: 'energyblue',
      source: dataAdapter,                   
 			width: "100%",
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname'
      }]
  });
	
	$("#jqxgridReadyPercent").jqxGrid({
      theme: 'energyblue',
      source: dataAdapter,
			width: "100%",
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: "20%"
      }, {
          text: 'Product',
  ...