移动中的表格总是超出宽度

Question

我有一个表格数据，但在移动设备中它超出宽度并滚动屏幕。

该表有一个属性overflow-y：auto;对于用户，仅滚动数据视图，而不是屏幕。

按照CSS（SASS）表格

.table-container
    width: 100%
    overflow-y: auto
    _overflow: auto
    margin: 30px 0 50px 0
    tr
      td
        border-top: 3px solid #FFFFFF
        color: #161616
        white-space: nowrap
        font-size: 0.875rem
        &:last-child
          text-align: center

你可以帮帮我吗？

Answer 1

除了字符串

外，一切正常

_overflow: auto

删除它。

＆＃13;

＆＃13;

.mobile {
  background: yellow;
  height: 150px;
  padding: 5px;
  width: 200px;
}

.table-container {
  width: 100%;
  overflow-y: auto;
  margin: 30px 0 50px 0;
}

td {
  border-top: 3px solid #FFFFFF;
  color: #161616;
  white-space: nowrap;
  font-size: 0.875rem;
}

＆＃13;

<div class="mobile">
  <div class="table-container">
    <table>
      <tr>
        <td>Ordinary</td>
        <td>VeryVeryVeryVeryVeryVeryVeryVeryVery Loooong</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;