小屏幕上的可滚动（左右）表格，屏幕的其余部分不可滚动答案

【问题标题】：Scrollable (left-right) table on small screens, rest of screen not scrollable小屏幕上的可滚动（左右）表格，屏幕的其余部分不可滚动
【发布时间】：2023-02-25 00:07:56
【问题描述】：

我的目标是有一个在大屏幕上正常显示的表格，但是当屏幕小于 $minTableWidth 时，它应该变得可滚动，并且它包裹的组件应该继续变小并显示移动友好，即仅该表应该是可滚动的。

这是我到目前为止所拥有的：

<div>
  <div>other parts of the page, etc...</div>
  <div className={styles.tableWrapperOuter}>
    <div className={styles.tableWrapperInner}>
      <Table className={styles.applicationTable}>
        {renderTableHeader()}
        <TableBody>{renderTableContent()}</TableBody>
      </Table>
    </div>
  </div>
</div>

.tableWrapperOuter {
  width: 100% //if screen is large, take up the full size

  @media screen and (max-width: $minTableWidth) { //if the screen is small, add scroll
    overflow-x: auto;
  }
}

.tableWrapperInner {
  min-width: 900px; //force the table to be normal size
}

.tableRowTemplate {
  grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(80px, 1fr) 80px 10px;
}

我已经尝试过各种组合，但我绝对坚持这一点，所以非常感谢任何/所有提示

【问题讨论】：

标签： html css sass

【解决方案1】：

尝试这个：

table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
</table>

<table>
  <tr>
    <td>My table</td>
  </tr>
</table>

【讨论】：