Question

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

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

示例将变得清晰：JsFiddle

Answer 1

请使用标签和标签内容类宽度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;
}

根据媒体宽度

1 个答案: