JSFiddle - React, Tailwind, and code Playground

by Dzyann

HTML

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th></th>
        <th class="test">column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>column 4</th>
        <th>column 5</th>
        <th>column 6</th>
        <!-- ... -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>row 1</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
       <tr>
        <th>row 2</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
       <tr>
        <th>row 3</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
       <tr>
        <th>row 4</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
       <tr>
        <th>row 5</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
       <tr>
        <th>row 6</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
       <tr>
        <th>row 7</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
      <tr>
        <th>row 7</th>
        <td class="test">scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
      <tr>
        <th>row 7</th>
        <td class="test">scroll</td>
       ...

CSS

.wrapper {
  width: 320px;
  height: 200px;
  overflow: auto;
  position: relative;
}

table {
  table-layout: fixed;
}

thead,
tr>th {
  position: sticky;
  background: #fff;
}

thead {
  top: 0;
  z-index: 2;
}
tr>th {
  left: 0;
  z-index: 1;
}
thead tr>th:first-child {
  z-index: 3;
}

JavaScript

var main = function()
{
    $boolean = true;
    
    $(".test").click
    (
       function()
       {
          if ($boolean)
      	  {
             $boolean = false;
             $(".test").animate
             (
                {
                   'max-width':'0px'
                },
                "fast"
             );  
           }
      	   else
      	   {
                $boolean = true;
                $(".test").animate
                (
                    {
                        'max-width':'300px'
                    },
                    "fast"
                );  
           }    
       }
  );
}
$(document).ready(main);