根據媒體寬度顯示div的滾動條

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; 
}