响应表溢出-x：自动

Question

我已经在我的桌子上设置了overflow-x到auto但它没有做任何事情。即使我将表格的最大宽度设置为100％，它仍会在整个页面上产生水平滚动条，而不仅仅是桌面。

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

我知道我可以通过指定我的tbody的像素宽度来强制显示滚动条，但这不是真正的解决方案。我希望只有在页面底部出现水平滚动条时才会显示滚动条。

* {
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; 
 }
 }