html - 根据媒体宽度显示div的滚动条

Question

我正在选项卡内创建一个表格。我想将选项卡的宽度设置为媒体屏幕的宽度，但将表格的 width 固定为 630px。 div 的max-width 应该是400px。当表格不适合 div 时，它应该显示水平滚动条。

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

示例将变得清晰:JsFiddle

Answer 1

请使用 tab 和 tab-content class width 100% 可能对你有用。我在下面分享了您的完整代码以及我所做的更改我做了一些宽度更改 px 到 %，#model margin-right: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;
}