How to make a table responsive, created in javascript-CodePudding

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);

CodePudding user response：

Try creating the table in HTML.

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

Then populate the fields in Js.

CodePudding user response：

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