Html 将桌子保持在设定的宽度，并在移动设备中溢出

我正在努力将一张桌子保持在一张桌子内，以保持设定的宽度，并在移动中保持水平滚动

这样就不会有任何东西被压扁，我可以保持可读性。在使用javascript/jQuery之前，我尝试使用纯CSS

当前示例：

（链接已删除）

我当前拥有的DOM结构：

<table>
    <tr>
        <td>Vessel name and $</td>
        <td>
            <div class="container">
                <table>
                    <tr>
                        <td>Sold</td>
                        <td>Sold</td>
                        <td>Available</td>
                        <td>Sold</td>
                    </tr>
                </table>
            </div>
        </td>
        <td>Proceed button</td>
    </tr>
</table>

船只名称及$
出售
出售
可用
出售
继续按钮

容器中的表格

我希望保持设定的宽度，例如500px，当我们进入移动设备时，我希望能够有一个水平溢出，以便用户可以滑动/滚动该特定容器的可用性

我有一个开发页面，说明了我想要实现的目标，它还包含了我到目前为止使用过的CSS（注意，仍然在修补）

---

（链接已被重新删除）

一种可能是媒体查询，使div可以在小分辨率下滚动

@media(max-width: 767px) {
  .container {
    overflow-x: scroll;
  }
}

---

我假设

max width

是不可能的？@rybo111我还没有用尽max width的用法。如果您现在查看dev站点并进行一次硬刷新，我现在已经取得了一些进展。我现在确实有一些水平滚动发生！