JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <table class="table">
    <tr class="table__header">
      <td class="table__cell"></td>
      <td class="table__cell">База</td>
      <td class="table__cell">Стандарт</td>
      <td class="table__cell">Анлим</td>
    </tr>
    <tr class="table__body">
      <td class="table__cell">Розовый фильтр</td>
      <td class="table__cell">+</td>
      <td class="table__cell">+</td>
      <td class="table__cell">+</td>
    </tr>
    <tr class="table__body">
      <td class="table__cell">Смайлики</td>
      <td class="table__cell">+</td>
      <td class="table__cell">-</td>
      <td class="table__cell">-</td>
    </tr>
    <tr class="table__body">
      <td class="table__cell">Комментарии</td>
      <td class="table__cell">+</td>
      <td class="table__cell">+</td>
      <td class="table__cell">-</td>
    </tr>
  </table>
<div class="buttons">
  <button class="back">Back</button>
  <button class="next">Next</button></div>
</div>

CSS

.table {
  width: 100%;
  background-color: #ccc;
  border-collapse: collapse;
}
.table__cell {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.table__header {
  background-color: lightblue;
}

.buttons {
  display: none;
  text-align: center;
}

@media (max-width: 400px) {
  .wrapper {
    width: 300px;
    overflow: hidden;
  }
  
  .table {
    width: 900px;
    position: relative;
    left: 0;
    transition: left .5s;
  }
  .table__cell {
    width: 300px;
  }
  .table__cell:nth-of-type(1) {
    display: none;
  }
  .table__body:nth-of-type(2) .table__cell:before {
    content: 'Розовый фильтр';
  }
  
  .table__body:nth-of-type(3) .table__cell:before {
    content: 'Смайлики';
  }
  
  .table__body:nth-of-type(4) .table__cell:before {
    content: 'Комментарии';
  }
  
  .buttons {
    display: block;
  }
 }

JavaScript

var table = document.querySelector('.table');
document.querySelector('.next').onclick = function() {
	var left = parseInt(window.getComputedStyle(table).left) - 300;
  if(left < -600) left = -600;
  table.style.left = left + 'px';
}

document.querySelector('.back').onclick = function() {
	var left = parseInt(window.getComputedStyle(table).left) + 300;
  if(left > 0) left = 0;
  table.style.left = left + 'px';
}