Адаптивная таблица с помощью JavaScript

jsfiddle.net/fjcd8g9p

html

<table>
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Payment #1</td>
      <td>02/01/2015</td>
      <td>$2,311</td>
      <td>01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td>Payment #2</td>
      <td>03/01/2015</td>
      <td>$3,211</td>
      <td>02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>

javascript

for (const table of document.querySelectorAll('table')) {
  const labels = Array.from(table.tHead.rows[0].cells, n => n.innerText);

  for (const tr of table.tBodies[0].rows) {
    for (let i = 0; i < tr.cells.length; i++) {
      tr.cells[i].dataset.label = labels[i];
    }
  }
}

css

  table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }