JSFiddle - React, Tailwind, and code Playground

by Andrey7287

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="options">
  <input type="radio" name="options" checked />
  <input type="radio" name="options" />
</div>


<table>
	<thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
	</thead>
	<tbody class="tbody">
    <tr class="act">
      <td data-label="First Name">James</td>
      <td data-label="Last Name">Matman</td>
      <td data-label="Job Title">Chief Sandwich Eater</td>
    </tr>
    <tr>
      <td data-label="First Name">The</td>
      <td data-label="Last Name">Tick</td>
      <td data-label="Job Title">Crimefighter Sorta</td>
    </tr>
	</tbody>
</table>

SCSS

@media (min-width: 761px) {
  table { 
    width: 100%; 
    border-collapse: collapse;  
  }
  .options {
    display: none;
  }
}
th { 
    background: #333; 
    color: white; 
    font-weight: bold; 
  }
  td, th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
}


@media (max-width: 760px)  {

	table, thead, tbody, th, td { 
		display: block; 
	}

	thead { 
		display: none
	}
	
	tr { 
    display: none;
    border: 1px solid #ccc;
    &.act{
      display: block;
    }
   }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%;
    &::before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
      /* Label the data */
      content: attr(data-label);
    }
	}
}

JavaScript

var $options = $('.options').find('input');
var $slides = $('.tbody').find('tr');

$options.change(function(){
	var cnt = $options.index(this);
  var currentSlide = $slides[cnt];
  
  $(currentSlide).addClass('act');
  $(currentSlide).siblings('tr').removeClass('act');
});