我有一个表，我想在它上面添加水平滚动。
但是，我无法更改外部 Package （.app）和主体值。
我已经尝试了几种方法，比如overflow-x：滚动;和空白：nowrap;没有运气大多数我已经结束了滚动条没有滚动...
我已经做了一个codesandbox实验...仍然没有线索应该如何解决这个“限制”：https://codesandbox.io/s/keen-boyd-8cgw0w?file=/src/styles.css

body {
  overflow: hidden;
}

.outer-wrap {
  background-color: red;
  width: 100vh;
  height: 50vh;
}

/* Can't modifiy body, or the .outer-wrap */

.wrap {
  background-color: green;
  padding: 1rem;
  /* can't modifiy this width! */
  width: 100%;
  overflow-x: scroll;
}

table {
  overflow-x: scroll;
}

th,
tr,
td {
  /* it just to make the table wide */
  padding-left: 10rem;
}

我的html是这样的：

<div class="outer-wrap">
      <div class="wrap">
        <table>
          <tbody>
            <tr>
              <th>1</th>
              <th>2</th>
              <th>3</th>
              <th>4</th>
              <th>5</th>
              <th>6</th>
            </tr>
            <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
              <td>D</td>
              <td>E</td>
              <td>F</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>