メディアの幅に応じて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; 
}