JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-wrapper">
  <div class="table-wrapper-inner">
    <table>
      <tr>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>
      <tr>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>
      <tr>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>
    </table>    
  </div>
</div>

CSS

* {
  margin:0;
  padding:0;
}

html, body {
  height:100%;
}

.table-wrapper {
  position:relative;
}

.table-wrapper:before {
  content:"";
  display:block;
  padding-bottom:100%;
}

.table-wrapper-inner {
  width:100%;
  position:absolute;
  top:0;
  bottom:0;
}

.table-wrapper table {
  width:100%;
  height:100%;
  text-align:center;
}