How to solve the problem with vertical scrolling of tables through CSS?

Question

css

Hello. I decided here to make the tables on the site scrollable horizontally for mobile devices, and that's the trouble.
For several hours I can not understand what's wrong. Everything looks like this:

<div class="table-wrapper">
  <table>
    <tr>
      <td>content</td>
      <td>...</td>
      <td>content</td>
    </tr>
  </table>
</div>

In CSS, I write overflow for the wrapper like this:

.table-wrapper {
  overflow-x: auto;
}

But for some reason, when viewing the table on screens that are smaller than the size of the table, the entire site is stretched to the width of the table, in other words, adaptability disappears completely.
Tried adding table-layout: fixed but caused a bunch of other bugs. Please help me solve the problem...