Responsive Table

Restructures the table to make it responsive on smaller screens in a vertical layout setting.

by TheAmazingKnight

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="chart1">
  <div>
    <div>
      <table>
        <tbody>
          <!-- START TABLE BODY LAYOUT -->
          <tr class="table-tr">
            <th>Main Header 1</th>
            <td>
                <ul>
                  <li>List A</li>
                  <li>List B</li>
                  <li>List C</li>
                </ul>
            </td>
          </tr>
          <tr class="table-tr">
            <th>Main Header 2</th>
            <td>
              <ul>
                <li>List A</li>
                <li>List B</li>
              </ul>
            </td>
          </tr>
          <tr class="table-tr">
            <th>Main Header 3</th>
            <td>
              <ul>
                <li>List A</li>
              </ul>
            </td>
          </tr>
          <tr class="table-tr">
            <th>Main Header 4</th>
            <td>
                <ul>
                  <li>List A</li>
                  <li>List B</li>
                  <li>List C</li>
                </ul>
            </td>
          </tr>
          <tr class="table-tr">
            <th>Main Header 5</th>
            <td>
              <ul>
                <li>List A</li>
                <li>List B</li>
              </ul>
            </td>
          </tr>
          <tr class="table-tr">
            <th>Main Header 6</th>
            <td>
              <ul>
                <li>List A</li>
              </ul>
            </td>
          </tr>
          <!-- END TABLE BODY LAYOUT -->
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

#chart1 tr > th {background: blue;}
@media only screen and (max-width: 2799px) {
  #chart1 td, th {display: block;clear: both;}
  #chart1 tr:first-child td {font-weight: bold;}
  #chart1 td:first-child {font-weight: normal;}
}

JavaScript

if (window.matchMedia('(max-width: 2799px)').matches) {
  // do functionality on screens smaller than 2799px

  var headerTitleArr = ["Players","Stamina","Home Runs"];
  var headerTitleArrLength = 2;
  var mainChart = $("#chart1");
  var headerIndexCount = 0;
  // loop thru each of the tr.table-tr rows tracked by index and change the th text's index with the header text value
  $("#chart1 tr.table-tr > th").each(function(thIndex) {
    headerIndex = headerIndexCount;

    // TO FIX
    $(this).text(headerTitleArr[headerIndex]);
    console.log(headerTitleArr[headerIndex]);
    console.log($(this).text());
    
    headerIndexCount++;

    // if headerIndex equals to the length of the array, reset value
    if (headerIndex == headerTitleArrLength) {
      headerIndexCount = 0; // reset value
      
      // add border after each end of the header title array length
      $(this).parent().after('<div class="divider" style="border-bottom: 1px solid #ccc;margin: 25px 0px;"></div>');
    }
  });
}