JSFiddle - React, Tailwind, and code Playground

by watchduck

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="container">

<table>
  <tbody class="block">
    <tr class="block fixed">
      <th class="block">
        <button>hide</button>
        <a href="https://commons.wikimedia.org/wiki/File:Passau_Altstadt_Panorama_4.jpg">Panorama of Passau</a> by Aconcagua
      </th>
    </tr>
    <tr id="collapsible">
      <td>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Passau_Altstadt_Panorama_4.jpg/4000px-Passau_Altstadt_Panorama_4.jpg"/>
      </td>
    </tr>
  </tbody>
</table>

</div>

CSS

div.container {
  width: 500px;
  background-color: pink;
  padding: 5px;
}

table {

  border-collapse: collapse;
  border: 2px solid red;
}

td {
    display: block; 
  width: 100%;
  overflow-x: auto; 
}

.block {display: inline-block;}
.fixed {position: fixed;}

table td, table th {
  border: 2px solid green;
  padding: 5px;
}

table th {background-color: #ada;}
table td {background-color: #cdc;}

button {float: left;}

JavaScript

collapsed = false;
$("button").on( "click", function( event ) {
  event.preventDefault();
  if (collapsed) {
    $("#collapsible").show();
    $("button").html("hide");
    $("table").css("display", "block");
    collapsed = false;
  } else {
    $("#collapsible").hide();
    $("button").html("show");
    $("table").css("display", "inline-table");
    collapsed = true;
  }
});