Html 根据介质宽度显示div的滚动条

我正在选项卡中创建一个表。我想将tab的宽度设置为媒体屏幕的宽度，但将表的

宽度

固定为

630px

。div的

最大宽度应为
400px
。当表格不适合div时，它应该显示一个水平滚动条

div正在成功显示水平滚动条。但是，当我调整窗口大小时，滚动条和表格隐藏在div中。我想根据媒体宽度显示滚动条

示例将变得清晰：
请使用tab和tab内容类宽度100%，这可能适合您。我在下面分享你的完整代码和我的更改我已经做了一些宽度更改px到%，以及#模型边距正确的目的是什么：1000px它将工作没有边距

#tabs-container {
    height: auto;
    overflow: hidden;
    margin-bottom: 40px;
    position: relative;
    top: 60px;
    border: 1px solid #ddd;
    padding-top: 10px;
    max-width: 400px;
}
.tab {
    border: 1px solid #d4d4d1;
    background: linear-gradient(#f8fbea, #fff);
    margin: -20px 10px 10px 10px;
    float: left;
    position: relative;
    top: 0;
    z-index: 3;
    width:100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
}

.tab-content {
    padding: 10px;
    width:100%
}

#model {
    font-size: 12px;
    margin: -10px -10px -10px -320px;
    position: relative;
    margin: 0 auto;
    font-family: tahoma;
}

#model {
    margin-right: 1000px;
    width: 630px;
}

#model td {
    vertical-align: middle;
}

#model tr:first-child td {
    font-weight: 600;
    text-align: center;
    background-color: #ebebeb;
}

#model tr:nth-child(even) {
    background-color: #f6f6f6;
}

#model tr:nth-child(odd) {
    background-color: #fff;
}

这是可行的，但正如您所看到的，滚动条从右侧略微裁剪。原因是什么？请删除页边距。选项卡{margin:-20px 10px 10px；}，请使用从左到右的0页边距。