Responsive table with overflow-x: auto

Question

I have set overflow-x to auto on my tables tbody but it doesn't do anything. Even when I set the max width of the table to 100%, it still causes horizontal scrollbars on the whole page, rather than just the table body.

https://codepen.io/cssgrid/pen/QdebzG/

I know I can force scrollbars to appear by specifying a pixel width of my tbody, but that's not really a solution. I would like the scrollbar only to appear when there would otherwise have to appear a horizontal scrollbar at the bottom of the page.

* {
box-sizing: border-box;
}


html, body {
max-width: 100vw;
margin: 0;
padding: 0;
}

table {
margin: auto;
border-collapse: collapse;
display: block;
max-width: 100%;
margin-top: 2rem;
}

td, th {
border: solid gray 1px;
padding: .5rem;
}

th {
text-align: left;
background-color: rgb(190, 220, 250);
text-transform: uppercase;
padding-top: 1rem;
padding-bottom: 1rem;
}

td {
white-space: nowrap;
}

@media (max-width: 760px) {
table {
white-space: nowrap;
font-size: 0;
width: 100%;
table-layout: fixed;
}
table * {
font-size: 1rem;
}

tr {
display: inline-flex;
flex-direction: column;
}
th, td {
padding: .25rem;
}

td {
white-space: normal;
}

thead, tbody {
  display: inline-block;
}

thead {
position: sticky;
}
tbody {
overflow-x: auto; 
 }
 }