csshtml-tableoverflow

How can I make a table header wide as the page, when a cell contains horizontal overflow?

I want to use a collapsible table, that always has the width of the page.
Its header cell should always have the width of the page.
The cell below shows content that needs to be scrolled horizontally.
How can I fix the size of the header cell?

When the content is hidden, the header is too short:
enter image description here

When the content is shown, the header is too long:
enter image description here
It's right border (green) should be at the right border of the table (red).
The title (Panorama...) should always be in the middle of the page.

I find the way SO currently shows code snippets quite useless, so here is a link to jsfiddle.

The aim is, to do this on a Wikimedia page. I hope there is a CSS solution, because I can not change the JS.

Edit: To make more clear what I am looking for, I have created another fiddle, where the scrolling happens in a div of fixed width. Now the surrounding table behaves as it should:

enter image description here

I want basically that, but with the visible part of the image as wide as the table, which is as wide as the page. I am aware that I could use JS to make the black-bordered div as wide as I want it to be. But I am looking for a solution with CSS.

So it should always look as follows. Note that the title is in the middle of the page (represented by the pink border), although the photo is scrolled to the right.

enter image description here

And of course the header does not change, when it is closed:

enter image description here

Edit 2: The answer by Lajos Arpad shows how the problem can be solved with JS. The corresponding fiddle shows how it should look and behave. But I need to solve this with CSS.

Edit 3: The problem was solved in a fiddle linked by Omar Abdulmoried.
Here is an example how it looks on Wikimedia.

What follows is my initial code snippet.

collapsed = false;
$("button").on( "click", function( event ) {
  event.preventDefault();
  if (collapsed) {
    $("#collapsible").show();
    $("button").html("hide")
    collapsed = false;
  } else {
    $("#collapsible").hide();
    $("button").html("show")
    collapsed = true;
  }
});
div.container {
  width: 500px;
  background-color: pink;
  padding: 5px;
}

table {
  display: block; 
  overflow-x: auto; 
  width: 100%;
  border-collapse: collapse;
  border: 2px solid red;
}

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

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

button {float: left;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="container">

<table>
  <tr>
    <th>
      <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>
</table>

</div>

Solution

  • The problem comes from this part of your CSS:

    let collapsed = false;
    $("button").on("click", function (event) {
      event.preventDefault();
      if (collapsed) {
        $("#collapsible").show();
        $("button").html("hide");
        collapsed = false;
      } else {
        $("#collapsible").hide();
        $("button").html("show");
        collapsed = true;
      }
    });
    div.container {
      width: 100%;
      max-width: 100%;
      background-color: pink;
      padding: 5px;
    }

    
    table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; 
}
    table th {
      width: 200px;
    }

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

    table th {
      background-color: #ada;
      text-align: center; 
    }

    table td {
      background-color: #cdc;
    }

    .scroll-wrapper {
      width: 100%;
      overflow-x: auto;
    }

    .scroll-wrapper img {
      display: block;
      max-height: 300px; 
    }

    button {
      float: left;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  


  <div class="container">
    <table>
      <tr>
        <th>
          <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>
          <div class="scroll-wrapper">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Passau_Altstadt_Panorama_4.jpg/4000px-Passau_Altstadt_Panorama_4.jpg"/>
          </div>
        </td>
      </tr>
    </table>
  </div>