JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
</table>
<button>маловато</button>

CSS

td {
  line-height: 20px;
  border: solid 1px gray;
  padding: 5px;
}
table {
  display: block;
  max-height: 171px;
  overflow: hidden;
  transition: max-height 1s ease-in;
}

JavaScript

let btn = document.querySelector('button')
let table = document.querySelector('table')
btn.onclick = function(){
	btn.style.display = 'none'
  table.style.maxHeight = '999px'
}