Create Responsive Feature Comparison Table in Genesis

responsive-feature-comparison-tables.txt

<table>
  <thead>
    <tr>
      <td>Features</td>
      <th>iPhone 5</th>
      <th>iPhone 6</th>
      <th>iPhone 7</th>
      <th>iPhone 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Battery</th>
      <td>1440 mAh</td>
      <td>1440 mAh</td>
      <td>1440 mAh</td>
      <td>1440 mAh</td>
    </tr>
     <tr>
      <th>RAM</th>
      <td>1GB</td>
      <td>10GB</td>
      <td>30GB</td>
      <td>60GB</td>
    </tr>
     <tr>
      <th>Processor</th>
      <td>1.3GHz dual-core</td>
      <td>1.3GHz dual-core</td>
      <td>1.3GHz dual-core</td>
      <td>1.3GHz dual-core</td>
    </tr>
     <tr>
      <th>Price</th>
      <td>&#8377;14,999</td>
      <td>&#8377;34,999</td>
      <td>&#8377;54,999</td>
      <td>&#8377;84,999</td>
    </tr>
  <tbody>
</table>

/*Add the CSS code snippets to the style.css file of your active child theme.*/

table {
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-collapse: collapse;
  margin-bottom:1em;
  word-break:normal;
  
  th, td {
    padding: 0.5em 1em;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    white-space: pre;
  }
  
  thead th,
  tbody td {
    text-align: center;
  }
  
  // Custom Styles
  thead {
    color: white;
    background: #0cf;
    
    th {
      padding: 1em;
    }
  }
  
  &[data-comparing="active"] tbody th {
    border-bottom: none;
    font-size: 0.75em;
    color: #767676;
    padding-bottom: 0;
  }

}

th:nth-child(2n), th:nth-child(3n), th:last-child, td:first-child {
    background: #00B289;
    color: white;
    font-weight: bold;
}

td:nth-child(1n), th:nth-child(1n), td:nth-child(2n), th:nth-child(2n), td:nth-child(3n), th:nth-child(3n) {
    padding-left: 5%;
    border-right: 1px solid #00B289;
    border-top: 1px solid #00B289;
    border-bottom: 1px solid #00B289;
    border-left: 1px solid #00B289;
}

th:first-child {
    background: #eee;
}

@media only screen and (max-width: 480px) and (min-device-width: 768px) and (max-device-width: 1024px) {
td:nth-child(1n), th:nth-child(1n), td:nth-child(2n), th:nth-child(2n), td:nth-child(3n), th:nth-child(3n) { 
  border: 1px solid #00B289;
}

table {
  border: 0;
}
}

/*Add the following scripts inside the Footer Scripts box located at Genesis theme settings of your active child theme.*/

<script>
var tableSelector = 'table';
var targetBreakpoint = 500;
var currentVisibleColumn = 1;
var nextButtonText = 'Next Model';

// SETUP/SELECT REUSABLE ELEMENTS
var table = document.querySelector(tableSelector);
var allCells = table.querySelectorAll('th, td');
var columnHeaders = table.querySelectorAll('thead th:not(:empty)');
var rowHeaders = table.querySelectorAll('tbody th');
var nextButton = document.createElement('button');

function createButtons() {
  nextButton.textContent = nextButtonText;
  nextButton.style.display = 'none';

  table.parentNode.insertBefore(nextButton, table.nextSibling);

  nextButton.addEventListener('click', function() {
    currentVisibleColumn = currentVisibleColumn + 1 > columnHeaders.length ? 1 : currentVisibleColumn + 1;
    showCurrentlyVisible();
  });
}

function showCurrentlyVisible() {
  // Get the Items we're going to show. The :not(:empty) query here is because sometimes you have empty <th>s in <thead>
  var currentlyVisibleColHeader = document.querySelector('thead th:not(:empty):nth-of-type( ' + currentVisibleColumn + ')');
  var currentlyVisibleCells = document.querySelectorAll('tbody td:nth-of-type(' + currentVisibleColumn + ')');

  // Hide All The Cells
  for (var i = 0; i < allCells.length; i++) {
    allCells[i].style.display = 'none';
  }

  // Show Currently Visible Col Header
  currentlyVisibleColHeader.style.display = 'block';

  // Show Currently Visible Cells
  for (var i = 0; i < currentlyVisibleCells.length; i++) {
    currentlyVisibleCells[i].style.display = 'block';
  }

  // Show Row Headers
  for (var i = 0; i < rowHeaders.length; i++) {
    rowHeaders[i].style.display = 'block';
  }
}

function updateTable() {

  // Get the Table's Width. Might as well go FULL Container Query over here.
  var tableWidth = table.getBoundingClientRect().width;

  // If the table explodes off the viewport or is wider than the target breakpoint
  if (tableWidth > window.innerWidth || tableWidth < targetBreakpoint) {

    if (table.getAttribute('data-comparing') != 'active') {
      // Set the comparison state to "Active"
      table.setAttribute('data-comparing', 'active');

      // Show Next Button
      nextButton.style.display = 'block';

      // Show the currently visible column
      showCurrentlyVisible();

    }

  } else {

    if (table.getAttribute('data-comparing') == 'active') {

      // Turn off comparing    
      table.setAttribute('data-comparing', '');

      // Hide the next button
      nextButton.style.display = 'none';

      // Remove styles from all cells, ergo, show all the cells
      for (var i = 0; i < allCells.length; i++) {
        allCells[i].style.display = '';
      }

      // Remove styles from all row headers
      for (var i = 0; i < rowHeaders.length; i++) {
        rowHeaders[i].style.display = '';
      }
    }
  }
}

createButtons();
updateTable();
window.addEventListener('resize', updateTable);
</script>