JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  <table>
    <thead>
      <tr>
        <th>Lorem ipsum.</th>
        <th>Provident, modi?</th>
        <th>Architecto, dolorem!</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem.</td>
        <td>Omnis.</td>
        <td>Neque?</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>Officiis.</td>
        <td>Odio.</td>
      </tr>
    </tbody>
  </table>
</main>

SCSS

* {
  box-sizing: border-box;
}

main {
  margin: 0 3em;
}

table {
  border: 1px solid silver;
  margin: 3em 0;
  width: 100%;
  border-collapse: collapse;
  
  th {
    background: salmon;
    padding: 1em;
  }
  
  td {
    padding: 1em;
  }
}

.active {
  background: purple;
}

JavaScript

$(function() {

	var $table = $('table');
  
	$('td, th').click(function(evt) {
  	if (!$(this).is('.active')) {
    	var index = $(this).index() + 1;
      $table.find('td.active, th.active').removeClass('active');
      $table.find('tr :nth-child(' + index + ')').addClass('active');
    }
  });

});