Как визуализировать таблицу Bootstrap 4 на небольших устройствах?

Question

У меня есть таблица начальной загрузки 4, которую я заполняю некоторыми данными JSON, моя таблица отлично отрисовывается на UI, но на небольшом устройстве пользователь должен прокрутить, чтобы увидеть полные данные таблицы, хотя таблица HTML не У меня есть столько данных, которые пользователь должен прокрутить на маленьком устройстве.

1. Чего я пытаюсь добиться, на экране мобильного устройства данные таблицы должны отображаться на полном экране
2. пользователю не нужно выполнять горизонтальную прокрутку, если в таблице меньше 8 или 10 столбцов
3. Здесь у меня есть HTML-таблица Bootstrap, содержащая всего 6 столбцов, которые должны отображаться на небольшом экране UI, как мобильные телефоны, но это не так.

Отрывок

var data = [{
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR1"
  },



]
let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,
  };
};
let renderTable = function(data) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("tblOlSalesSummary");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let outletWiseTotal = {};
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);
    outletWiseTotal[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
      }
    });
    grandTotal += outletWiseTotal[element];
  });
  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = outletWiseTotal[element].toLocaleString('en-in');
    th.classList.add("text-right");

    headerRow.appendChild(th);
  });
  th = document.createElement("th");
  th.innerHTML = grandTotal.toLocaleString('en-in');
  th.classList.add("text-right");
  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);
    let total = 0;
    outlets.forEach(outlet => {
      let el = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          el = d.amount;
        }
      });
      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-in');
      td.classList.add("text-right");
      row.appendChild(td);
    });
    /* console.log("row is : " , row.children ) */
    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-in');
    td.classList.add("text-right");
    // row.appendChild(td);
    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-hover");
  table.classList.add("table-bordered");

}
let formatedData = formatData(data);
renderTable(formatedData);

@media only screen and (max-width: 1500px) {
  table.table-bordered>thead>tr>th {
    border: 1px solid black;
    white-space: nowrap;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 15pt;
  }
  table.table-bordered>tbody>tr>td {
    border: 1px solid black;
    white-space: nowrap;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 12pt;
  }
}

@media only screen and (max-width: 768px) {
  table.table-bordered>thead>tr>th {
    font-size: 7pt;
  }
  table.table-bordered>tbody>tr>td {
    font-size: 5pt;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div align="center" class="table table-responsive">

  <table id="tblOlSalesSummary">
  </table>

</div>

Просто нужно заполнить таблицу на небольшом устройстве за один раз, чтобы пользователю не нужно было прокручивать по горизонтали

Пожалуйста, проверьте на маленьких устройствах его горизонтальную прокрутку для небольших данных, которые мне не нужны.

Итак, кто-нибудь здесь, пожалуйста, помогите мне, как я могу рендерить таблицу на маленьком устройстве за один раз на весь экран.

Answer 1

Вам не нужно помещать таблицу в таблицу. Вы можете использовать 1 таблицу и заполнить данные в этой таблице. Спасибо

проверьте ссылку ниже

https://codepen.io/Xenio/pen/zyadrv?editors=1000xxx