How to make a table responsive, created in javascript

Question

I have a js, which generates a table for me, I show it in the html, but I can't make it responsive; how could i fix it

The code is the following, I have modified with responsive table, but it still does not work for me

var tabla   = document.createElement("table");
tabla.className="table";

var thead = document.createElement("thead");

let row_1 = document.createElement('tr'); 
let heading_1 = document.createElement('th');
heading_1.scope="col";
heading_1.innerHTML = "Mes";
let heading_2 = document.createElement('th');
heading_2.innerHTML = "Cuota";
heading_2.scope="col";
let heading_3 = document.createElement('th');
heading_3.innerHTML = "Interes";
heading_3.scope="col";
let heading_4 = document.createElement('th');
heading_4.innerHTML = "Amorti.";
heading_4.scope="col";
let heading_5 = document.createElement('th');
heading_5.innerHTML = "Capital";
heading_5.scope="col";
let heading_6 = document.createElement('th');
heading_6.innerHTML = "Seguro Desgrav.";
heading_6.scope="col";
let heading_7 = document.createElement('th');
heading_7.innerHTML = "Seguro Inmobil.";
heading_7.scope="col";

let heading_8 = document.createElement('th');
heading_8.innerHTML = "Gastos Adm.";
heading_8.scope="col";

let heading_9 = document.createElement('th');
heading_9.innerHTML = "Cuota Final";
heading_9.scope="col";



row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
row_1.appendChild(heading_4);
row_1.appendChild(heading_5);
row_1.appendChild(heading_6);
row_1.appendChild(heading_7);
row_1.appendChild(heading_8);
row_1.appendChild(heading_9);
thead.appendChild(row_1);

Answer 1

Try creating the table in HTML.

 <div style="overflow-x:auto;"> <table>... </table> </div>

Then populate the fields in Js.

Answer 2

This might help if you are not using any of responsive CSS frameworks like Bootstrap or my favourites (for the simplicity it offers) W3.CSS