移动端表格宽度溢出求助：实现表格区域内滚动而非页面滚动

Hey there! I’ve run into this exact issue before—let’s get that table scrolling properly within its container instead of making the whole page scroll. Here’s what’s missing in your current setup and how to fix it:

The Root Problem #

You’ve enabled vertical scrolling with overflow-y: auto, but the table is overflowing horizontally on mobile (since your td uses white-space: nowrap). Without enabling horizontal overflow on the container, the table will push the entire page wide instead of scrolling inside its wrapper.

Updated CSS (SASS) Solution #

Let’s tweak your styles to contain the table properly:

.table-container {
  width: 100%;
  max-width: 100%; /* Ensures the container never exceeds its parent's width */
  box-sizing: border-box; /* Makes width include padding/borders if you add them later */
  overflow-x: auto; /* Critical: Enables horizontal scrolling for the table */
  overflow-y: auto;
  _overflow: auto; /* Keep for IE compatibility */
  margin: 30px 0 50px 0;

  /* Optional: Style the scrollbar for better mobile UX */
  &::-webkit-scrollbar {
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }

  /* Ensure the table behaves correctly inside the container */
  table {
    width: 100%; /* Or use min-width: max-content; to force full content width */
    border-collapse: collapse; /* Optional: Clean up border spacing */
  }
}

tr td {
  border-top: 3px solid #FFFFFF;
  color: #161616;
  white-space: nowrap;
  font-size: 0.875rem;
  &:last-child {
    text-align: center;
  }
}

Key Changes Explained #

• overflow-x: auto: This tells the container to add a horizontal scrollbar when the table is wider than the container, instead of letting it spill out.
• max-width: 100%: Prevents the container itself from expanding beyond its parent element (like your mobile viewport).
• box-sizing: border-box: Ensures any padding or borders you add to the container later won’t make it wider than 100%.
• Table styling: Setting width: 100% makes the table fill the container, but if your content needs more space, min-width: max-content will force the table to be as wide as its longest content while still scrolling inside the container.

Once you apply these changes, the table will scroll horizontally within its container, and the rest of your page won’t get pushed out of view on mobile.

内容的提问来源于stack exchange，提问作者user3776181