JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

<table id='tableau'>
  <thead>
    <tr>
      <th class="colAtete">A</th>
      <th class="col notDisplayed">B</th>
      <th class="col notDisplayed">C</th>
      <th class="col notDisplayed">D</th>
      <th class="col notDisplayed">E</th>
      <th class="col notDisplayed">F</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="colA">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
    </tr>
    <tr>
      <th class="colA">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
      <th class="col notDisplayed">123123</th>
    </tr>
  </tbody>
</table>

CSS

table {	
	margin-top:40px;
	margin-left:20px;

	border-collapse:collapse;
	}
td, th {
  width:100px;
	padding:3px;
	border: 1px solid gray;
	}
.colAtete{
  cursor:pointer;
}
thead {
	border:3px solid black;
	}
tbody {
	border:3px solid black;
	}
.notDisplayed {
    display: none;
    }

JavaScript

$("#tableau").on('click', '.colAtete', function() {
                $('.col').animate({width: 'toggle'});
                });