title: make the last column of the dynamically generated table floating
body: <p>I have a function that takes json as input and then generates a table but as the data is too much, the no. of columns are more. Even though i have a horizontal scroll bar, to see the last column(most important column), too much of scrolling needs to be done.
  I am new to css and do not know if it possible to float the last column, so that even if i do not scroll, the last column is always wrapped in the right portion of the table and opens when i scroll it.
  So that i can see the last column of the table eveytime.</p>
  
  <p>Here is the sample json data:</p>
  
  <pre><code>var myContacts = [{
      "owner": "swapneil",
      "fleet_name": "RancorService",
      "creation_date": "09-03-2020",
      "environment": "RancorService/JP",
      "vip_port": 80,
      "partition": "YES",
      "protocol": "HTTP",
      "monitor": "Consistent (http-ping)",
      "lbset": "Consistent",
      "predictor": "Consistent",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (36)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RancorService",
      "creation_date": "09-03-2020",
      "environment": "RancorService/JP",
      "vip_port": 443,
      "partition": "YES",
      "protocol": "TCP",
      "monitor": "NC",
      "lbset": "NC (&gt;1 Vip's in same LB)",
      "predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (9000)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Non-Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionAwareBaseLayer",
      "creation_date": "09-03-2020",
      "environment": "RegionAwareBaseLayer/NA",
      "vip_port": 80,
      "partition": "YES",
      "protocol": "HTTP",
      "monitor": "Consistent (http-ping)",
      "lbset": "Consistent",
      "predictor": "Consistent",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (56)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "NC : &gt;1 VIP's MISSING TIER-1 TAG",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionAwareBaseLayer",
      "creation_date": "09-03-2020",
      "environment": "RegionAwareBaseLayer/NA",
      "vip_port": 443,
      "partition": "NO",
      "protocol": "TCP",
      "monitor": "Consistent (ssl-ping)",
      "lbset": "Consistent",
      "predictor": "NC :SHOULD BE ROUNDROBIN",
      "spillover": "Consistent",
      "vip_cka": "NC : SHOULD BE DISABLED (YES)",
      "max_conns": "Consistent : (9000)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionMappingService",
      "creation_date": "09-03-2020",
      "environment": "RegionMappingService/EU",
      "vip_port": 80,
      "partition": "YES",
      "protocol": "HTTP",
      "monitor": "Consistent (http-ping)",
      "lbset": "Consistent",
      "predictor": "Consistent",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (16)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionMappingService",
      "creation_date": "09-03-2020",
      "environment": "RegionMappingService/EU",
      "vip_port": 443,
      "partition": "YES",
      "protocol": "TCP",
      "monitor": "NC",
      "lbset": "NC (&gt;1 Vip's in same LB)",
      "predictor": "NC :SHOULD BE ROUNDROBIN",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (9000)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Non-Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionAwareBaseLayer",
      "creation_date": "09-03-2020",
      "environment": "RABLIndexer/EU",
      "vip_port": 80,
      "partition": "NO",
      "protocol": "HTTP",
      "monitor": "Consistent (http-ping)",
      "lbset": "Consistent",
      "predictor": "Consistent",
      "spillover": "Consistent",
      "vip_cka": "NC : SHOULD BE DISABLED (YES)",
      "max_conns": "MAX-CONNS WITH DEFAULT VALUE : 15",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Non-Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionMappingService",
      "creation_date": "09-03-2020",
      "environment": "RegionMappingService/JP",
      "vip_port": 80,
      "partition": "YES",
      "protocol": "HTTP",
      "monitor": "NC",
      "lbset": "Consistent",
      "predictor": "Consistent",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (40)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    },
    {
      "owner": "swapneil",
      "fleet_name": "RegionMappingService",
      "creation_date": "09-03-2020",
      "environment": "RegionMappingService/JP",
      "vip_port": 443,
      "partition": "YES",
      "protocol": "TCP",
      "monitor": "NC",
      "lbset": "NC (&gt;1 Vip's in same LB)",
      "predictor": "NC :SHOULD BE ROUNDROBIN",
      "spillover": "Consistent",
      "vip_cka": "Consistent :(NO)",
      "max_conns": "Consistent : (9000)",
      "vip_cipher": null,
      "vip_cip": "Consistent",
      "vip_tier": "Consistent(Non-Tier1)",
      "vip_siloed": "Consistent(Non-SILOED)",
      "vip_globalized": "Consistent(Non-GLOBALIZED)",
      "vip_dedicated": "Consistent(Non-DEDICATED_VIP)",
      "vip_retail_tag": "Consistent(RETAIL_TAG)",
      "down_stat_flush": "Consistent :(ENABLED)",
      "vip_type": "Consistent (BACKEND)",
      "server_port": "Consistent",
      "vip_server_timeout": "Consistent",
      "vip_client_timeout": "Consistent",
      "persistent_method": "Consistent",
      "persistent_timeout": "Consistent"
  
    }
  ];
  </code></pre>
  
  <p>and here is the function that converts the json into table:</p>
  
  <pre><code>function generateDynamicTable(myContacts) {
    var noOfContacts = myContacts.length;
  
    if (noOfContacts &gt; 0) {
  
  
      // CREATE DYNAMIC TABLE.
      var table = document.createElement("table");
      table.style.width = '50%';
      table.setAttribute('border', '1');
      table.setAttribute('cellspacing', '0');
      table.setAttribute('cellpadding', '5');
  
      // retrieve column header ('Name', 'Email', and 'Mobile')
  
      var col = []; // define an empty array
      for (var i = 0; i &lt; noOfContacts; i++) {
        for (var key in myContacts[i]) {
          if (col.indexOf(key) === -1) {
            col.push(key);
          }
        }
      }
  
      // CREATE TABLE HEAD .
      var tHead = document.createElement("thead");
  
  
      // CREATE ROW FOR TABLE HEAD .
      var hRow = document.createElement("tr");
  
      // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
      for (var i = 0; i &lt; col.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = col[i];
        hRow.appendChild(th);
      }
      tHead.appendChild(hRow);
      table.appendChild(tHead);
  
      // CREATE TABLE BODY .
      var tBody = document.createElement("tbody");
  
      // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
      for (var i = 0; i &lt; noOfContacts; i++) {
  
        var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD
  
  
        for (var j = 0; j &lt; col.length; j++) {
          var td = document.createElement("td");
          if (col[j] == 'monitor' &amp;&amp; myContacts[i][col[j]] == 'NC') {
            var a = document.createElement('a');
            var linkText = document.createTextNode("Ext. link");
            a.appendChild(linkText);
            a.title = "Check details";
            a.href = "http://example.com";
            td.appendChild( a );
          } else {
            td.innerHTML = myContacts[i][col[j]];
          };
          bRow.appendChild(td);
        }
        tBody.appendChild(bRow)
  
      }
      table.appendChild(tBody);
  
  
      // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
      var divContainer = document.getElementById("demo");
      divContainer.appendChild(table);
  
    }
  };
  </code></pre>
  
  <p>Can anyone please help??</p>
  
  <p>After the suggestion in the comment box i did the following change:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css"&gt;
  &lt;style type="text/css"&gt;
          /* Ensure that the demo table scrolls */
          th, td { white-space: nowrap; }
          div.dataTables_wrapper {
              width: 800px;
              margin: 0 auto;
          }
  &lt;/style&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
          var table = $('#example').DataTable( {
              scrollY:        "300px",
              scrollX:        true,
              scrollCollapse: true,
              paging:         false,
              fixedColumns:   {
                  leftColumns: 1,
                  rightColumns: 1
              }
          } );
      } );
  &lt;/script&gt;
  </code></pre>
  
  <p>and added these lines in the generateDynamicTable() function:</p>
  
  <pre><code>        table.setAttribute('id','example');
          table.setAttribute('class', 'stripe row-border order-column');
  </code></pre>
  
  <p>But still i am not getting the result. </p>